Получение хэша URL-адреса во время события / функции щелчка

#javascript #jquery

#javascript #jquery

Вопрос:

Я понимаю, что во время функции события щелчка jQuery событие щелчка запускается до завершения базового события (и URL обновляется)… таким образом, вы можете управлять событием. Это означает, что хэш ссылки еще недоступен через window.location.hash

e.target.hash Лучше, чем доступ к самому <a> элементу для получения значения хэша; или передача необходимой переменной через onclick событие? «Лучше» определяется как кроссбраузерная совместимость или более подвержен ошибкам.

Например:

 <a class="accountLink" href="#account/123456">Account 123456</a>
 
 $('.accountLink').click(function(e){
  console.log(e.target.hash);
  console.log(window.location.hash);
});
 

Журнал:

 #account/123456
(blank on initial click)
 

https://jsfiddle.net/r1xpsut1/1/

Ответ №1:

Учитывая ваши требования, похоже onhashchange , что мероприятие window было бы более подходящим:

 window.onhashchange = function() {
    alert(window.location.hash);
}
 

Обновленная скрипка

Комментарии:

1. Отлично, спасибо, Рори! Одна функция, отслеживающая обновление хэша, определенно подойдет в этом случае и поможет упростить.

Ответ №2:

Согласно Mozilla Web API, Event.target поддерживается во всех современных браузерах, за исключением Internet Explorer 6-8, где Event.srcElement вместо этого используется, поэтому, если вы хотите его поддержать, вы можете использовать:

 var target = (event.target || event.srcElement);
 

Фактически, указанное .event свойство определяется как:

Элемент DOM в левой части вызова, который вызвал это событие, например:

 element.dispatchEvent(event)
 

Поэтому это то же самое, что и обращение к самому <a> себе.