Предотвратить добавление определенных якорей нерелевантных записей в историю браузера?

Можно ли запретить добавление выбранных якорей в историю браузера?

Для сайта, над которым я сейчас работаю, это особая проблема, когда я пытаюсь вернуться на предыдущую страницу. При этом якоря повторяются в том порядке, в котором они были активированы, и мне приходится нажимать назад более одного раза, прежде чем вернуться на предыдущую страницу.

Вот некоторый код, с которым я сейчас работаю. Есть ли функция, которую я могу реализовать для достижения этого результата?

<!-- Image with Anchor to Open Lightbox Window -->
<div class="container">
  <a href="#view">
    <div class="pic">
      <img src="https://URLTOPIC.jpg">
    </div>
  </a>
</div>

<!-- Lightbox Prompt with Anchor to Close Window -->
<div class="customlightbox lb-animate" id="view">
  <div class="customlightbox-imgwrap">
    <img class="imgsrc" id="customlightbox-img" src="">
  </div>
</div>
<div id="customlightbox-controls" class="lb-animate">
  <a id="close-customlightbox" class="lb-animate" href="#!"></a>
</div>

Любая помощь приветствуется!


javascript html jquery anchor browser-history
person nr159    schedule 10.01.2018    source источник
comment
<a> не является хорошим элементом для использования чистой функциональности JS. Вместо этого используйте <button>.   -  person connexo    schedule 10.01.2018
comment
@connexo Итак, вы говорите, что я должен использовать тег <button> с якорем вместо тега <a>? Мне вообще не понятно...   -  person nr159    schedule 10.01.2018
comment
<a> предназначен для использования в одной из двух целей: для перехода на новую страницу или для перехода к привязке на той же странице. Для всего остального используйте разные элементы.   -  person connexo    schedule 10.01.2018
comment
Хорошо, тогда я могу активировать эти якоря на странице с другими элементами? Я просто пытаюсь заставить их работать, не добавляя в историю браузера.   -  person nr159    schedule 10.01.2018
comment
Могу ли я использовать что-то вроде <a href="javascript:;"> и при этом иметь функцию привязки?   -  person nr159    schedule 10.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

При использовании пустой привязки, например <a id="close-customlightbox" class="lb-animate" href="#!"></a>, которая используется как кнопка, вы можете установить href таким образом, чтобы отключить события привязки <a id="close-customlightbox" class="lb-animate" href="javaScript:void(0);"></a>

Подробнее о схеме URI javascript можно прочитать Что означает javascript:void(0)?

Для ссылок, которые вы используете для запуска моделей, избегайте поведения по умолчанию для их добавления в объект window.history.

document.querySelector('.trigger').addEventLister('click', function(e){
  e.preventDefault();
  //Do your stuff
});
person Nicolas M. Pardo    schedule 10.01.2018
comment
В порядке. Итак, в приведенном мной примере .trigger будет .lb-animate? А <a href="#view">? - person nr159; 10.01.2018
comment
Извините, просто немного запутался... - person nr159; 10.01.2018
comment
Нет, .trigger — это класс, который вы используете для отображения модального окна. поэтому ‹a href=#view class=trigger-modal› Затем вы добавляете прослушиватель событий к этому документу.querySelector('.trigger')addEventLister('click', showModal); И внутри функции JS, которая показывает модальное окно, вы передадите ему событие в качестве параметра, а затем избегаете обычной функции поведения showModal(e){e.preventDefault()} - person Nicolas M. Pardo; 10.01.2018
comment
Зачем ему вообще использовать для этого элемент a? С button type=button шаг отключения поведения по умолчанию даже не нужен. a явно не подходит для этой работы. - person connexo; 10.01.2018