CODEWITHSUNDEEP
javascripthtmljqueryjquery-eventsdeveloper-tools
Windwalker
Windwalker

Reputation: 1945

How to find which Javascript fires or handles an event?

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?

Upvotes: 1

Views: 99

Answers (1)

str
str

Reputation: 44969

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>.

Upvotes: 1

Related Questions