Javascript global onclick listener

Question

Is there a way to register a global onclick listener that will fire anytime an element is clicked? Need to also get the id of that element.

Does this answer your question? [How do I handle a click anywhere in the page, even when a certain element stops the propagation?](https://stackoverflow.com/questions/8054429/how-do-i-handle-a-click-anywhere-in-the-page-even-when-a-certain-element-stops) — leonheess, Mar 06 '21 at 00:33

score 32 · Accepted Answer · answered Apr 10 '15 at 06:51

32

document.addEventListener("click", function(evnt){
    console.log(evnt.target.id);
});

answered Apr 10 '15 at 06:51

emd

1,173
9
21

What speaks against "addEventListener"? Which will probably translate to "window.addEventListener"? – codepleb Sep 02 '21 at 14:44

score 3 · Answer 2 · answered Apr 10 '15 at 06:58

3

You can get id this way using javascript:

window.onclick = function(event) {alert(event.target.id);}

<div id="dID">div</div>
<button id="bId">Button</button>

<input type="text" id="txtId" class="txtclass" />

answered Apr 10 '15 at 06:58

ketan

19,129
42
60
98

score 1 · Answer 3 · answered Sep 13 '20 at 09:52

Check this code, I haves used it in my live project for tracking users behaviour.

document.addEventListener('click', (event)=> { 
    console.log('emitting click events');
})

document.addEventListener('dblclick',(event)=>{
    console.log('emitting double click events');
} )

document.addEventListener('contextmenu', (event)=>{
    console.log('emitting right click events');
})

document.addEventListener('mouseenter',(event)=> {
   console.log("mouse enter, hovering started")
})

document.addEventListener('mouseleave', (event)=> {
console.log("hovering finished")
})

Javascript global onclick listener

3 Answers3

Linked