How can I find out where a click event gets caught?

Question

I am working on a very complex website and i have a piece of HTML on the page inside which no button is clickable. I think the click event gets caught somewhere so that the click handlers of the buttons do not fire.

How can I find out where those click events gets caught?

Can we see the js/html code? (or a snippet of it) Maybe make a fiddle? — Naftali, Dec 21 '12 at 15:50
Have you verified you don't have a transparent element shadowing all other elements? — Brad Christie, Dec 21 '12 at 15:50
Are you sure that JavaSscript is enabled and that you are not getting an error in your JavaScript code? — jalynn2, Dec 21 '12 at 15:51

score 4 · Accepted Answer · answered Dec 21 '12 at 15:55

4

Add a click event listener to the document, and see what's catching the event:

document.addEventListener('click',function(e){
    console.log(e.target);
})

answered Dec 21 '12 at 15:55

Cerbrus

70,800
18
132
147

No, this is not what i am looking for. This way i do get the clicked html element, but this doen't help me find the piece of code where the click events propagation gets stopped. – Thariama Jan 07 '13 at 12:34
@Thariama: In that case, it might be an idea to have a look at [this SO question](http://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node), and use my code to check what element you should inspect. – Cerbrus Jan 07 '13 at 12:37
i am using the Visul Event bookmarklet already since several months. Tried it here, but i have not been able to detect the desired click event handler – Thariama Jan 07 '13 at 12:42
Then my last suggestion would be to add a [breakpoint in your JavaScript](https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints), and try to see if you can find the function responsible. – Cerbrus Jan 07 '13 at 12:44
found out the source to my problem has been soemwhere else (there was no stopping of the propagation, but an overlying html elment that prevented the desired element to be clicked). i will accept this answer because it is the solution to the problem in case an event intercepts/stops propagation – Thariama Jan 07 '13 at 14:34
You could have found that by using Firebug inspect. – ATOzTOA Jan 07 '13 at 14:44

score 0 · Answer 2 · answered Dec 21 '12 at 15:49

0

Just check the event.target of the click event to see where it is.

answered Dec 21 '12 at 15:49

Naftali

144,921
39
244
303

1

For that, you have to add an event handler to the clicked element. The OP wants to know where to add that event handler. – 11684 Dec 21 '12 at 15:55

score 0 · Answer 3 · answered Dec 21 '12 at 15:52

0

There should be a document.click() or document.live("click",...) handler somewhere in the javascript included in the page, which returns false.

answered Dec 21 '12 at 15:52

ATOzTOA

34,814
22
96
117

correct, now i would like to get to know how i can find it in a complex page with lots of included javascript files – Thariama Jan 07 '13 at 12:35
Use "find" in "Firebug" or "Chrome JS console". – ATOzTOA Jan 07 '13 at 13:10
find? - how do i use this? – Thariama Jan 07 '13 at 13:13
Open the website in Firefox. Open Firebug. Click on `HTML`, press `Ctrl + F`. Search dialog will pop-up, search for "click". This will get you any inline javascript code. Else click on `Script` and do search again. – ATOzTOA Jan 07 '13 at 13:49
In Chrome, press `Ctrl + Shift + J` to open JS Console. Click `Sources` and press `Ctrl + F`. – ATOzTOA Jan 07 '13 at 13:50
well, thanks for that info...but this function is nothing new to me (+1 for your effort) – Thariama Jan 07 '13 at 14:32

How can I find out where a click event gets caught?

3 Answers3