How to capture mouse click event in browser / go forward or hash change event in javascript?

Question

I want alert() when I click the "Back back" or "Forward" button or hash change in javascript. I tried this solution and it works, but it causes problems with other links on the web page and sends each request twice for any click event.

Is there any solution to capture it without using the setInterval() function? So I need to commit a hash change or a back / forward button click? I need a simple javascript code / function / property that should work in all modern browsers.

Any solution?

thanks

Answer 1

Not a good idea

Could you explain the reasons for this? We have all been on this path to prevent a return / forward, as well as a similar and distorted browser function.

It turns out that it is better to listen to the browser and write your application in such a way that these things become irrelevant. And it is also true that browsers block more and more things for javascript client applications, so it is very likely that your application will fail after (several) browser updates.

Go with HTML5

The HTML5 story specification may be exactly what you need. This is how everything should work and what to do with Ajax applications and the back / forward browser0s function. I suggest you check this out. See a working demo that does this pretty nicely.

Answer 2

I believe this is the answer Robert Koritnik was looking for, I found it here: https://developers.google.com/tv/web/articles/location-hash-navigation

There is an event (window.onhashchange) that fires whenever the location hash has been updated or changed, so all you have to do is set up an event handler using JavaScript to listen for this event and execute the hash based code. This is basically how it is done:

 function getLocationHash() { return window.location.hash.substring(1); } window.onhashchange = function(e) { switch(getLocationHash()) { case 'state1': execute code block 1; break; case 'state2': execute code block 2; break; default: code to be executed if different from case 1 and 2; } } 

It works for me on my website: http://www.designhandler.com

All this dynamically changes the content. Not ajax yet, but when I finish, it will be. I still use window.location.hash to track the state of the site. If you navigate the site, and then start using the back-forward buttons to navigate after the site is in history, it will dynamically change states as if the user actually pressed navigation, instead of having to reload the page later.

Answer 3

Is it for hash or for redirection? What are you trying to do? This kind of action is usually very intrusive.

You can try "onbeforeunload" for this javascript before leaving the page

---

Edited

Actually, the link you provide is accurate enough.

 var hash = location.hash; setInterval(function() { if (location.hash != hash) { hashUpdatedEvent(hash); } }, 100); function hashUpdatedEvent(hash) { switch(...); } 

Your duplicate link problem will be fixed if you change

 <a href="javascript:void(0)" onclick="someFuncion()">Go for it</a> function someFuncion() { doWhatever(); location.hash = 'somethingwasdone'; } function hashUpdatedEvent(hash) { if(hash == 'somethingwasdone') { doWhatever(); } } 

Just (update the hash and let the "event" handle the action):

 <a href="javascript:void(0)" onclick="someFuncion()">Go for it</a> function someFuncion() { location.hash = 'somethingwasdone'; } function hashUpdatedEvent(hash) { if(hash == 'somethingwasdone') { doWhatever(); } }