How to find which Javascript fires or handles an event?

Question

I am working on a HTML5 application framework, run by a SAP JEE application server, build for companies and their intranet and extranet sites. It is based on the grid framework "Semantic UI" and besides that contains a lot of (also third party) Javascript.

I am currently examining a bug, where clicking a specific icon in a menu, when the page is scrolled down, makes the page somehow scroll back again upwards.

Since there is this great amount of Javascript around, I am currently struggling to find the JS code snippet, which is causing this odd behaviour.

I've read this post here, and got to know event logging in Firebug and inspecting event handlers in Chrome, but that didn't really help me.

I found out that using:

$(<my Elem>).on('click', function(event){ event.preventDefault(); })

I can prevent the scrolling, but I still didn't discover the cause of it.

Has anybody some more advice on how to find the real cause of this?

If tracking event handlers doesn't work, you could search for occurrences of .scrollTop in your code (this is most probably the property manipulated to change the scroll). — nils
– nils, Commented Apr 26, 2016 at 13:40
Are you sure that the behaviour is caused by JavaScript? Things like <a href="#"> may cause scrolling as well when the click event is not properly handled. — str
– str, Commented Apr 26, 2016 at 13:45
Bam, that's it! Stupid me, I should've been aware of this. Would you please add your comment as an answer, to let me upvote it? — Windwalker
– Windwalker, Commented Apr 26, 2016 at 13:54

str · Accepted Answer · 2016-04-26 14:26:13Z

This behaviour might be caused by several different reasons. One of them that is often overlooked is links like <a href="#">Some JavaScript Handler</a>.

When the JavaScript handler does not properly handle the event (e.g. by calling event.preventDefault(), the HTML link will be followed in addition to the JavaScript handler. Most browsers handle a link to an empty anchor tag # by going to the top of the page. This can easily be avoided when using an empty href attribute like <a href>Some JavaScript Handler</a>.

Collectives™ on Stack Overflow

How to find which Javascript fires or handles an event?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related