Get URL hash during click event/function

Question

During a jQuery click event function, I understand the click event is fired before the underlying event is completed (and URL is updated)... so you can control the event. Which means the hash of the link isn't yet available via window.location.hash

Is e.target.hash better than reaching into the <a> element itself to get the hash value; or passing the necessary variable via an onclick event? "Better" defined as cross-browser compatibility or more prone to errors.

For example:

<a class="accountLink" href="#account/123456">Account 123456</a>

$('.accountLink').click(function(e){
  console.log(e.target.hash);
  console.log(window.location.hash);
});

Log:

#account/123456
(blank on initial click)

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

Rory McCrossan · Accepted Answer · 2016-10-14 15:42:58Z

4

Given your requirements it sounds like the onhashchange event of the window would be more appropriate:

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

Updated fiddle

answered Oct 14, 2016 at 15:42

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan J. Stout Over a year ago

Perfect, thanks Rory! One function watching for the hash update will definitely fit in this instance and help simplify.

Marcos Vives Del Sol · Accepted Answer · 2016-10-14 15:59:21Z

0

According to Mozilla Web API, Event.target is supported in every modern browser, except for Internet Explorer 6 to 8 where Event.srcElement is used instead, so if you want to support it, you can use:

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

In fact, said .event property is defined as:

The DOM element on the lefthand side of the call that triggered this event, eg:
element.dispatchEvent(event)

It is therefore the same as reaching the <a> youself.

answered Oct 14, 2016 at 15:59

Marcos Vives Del Sol

4791 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

Get URL hash during click event/function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related