Debugging click issues with javascript

This javascript snippet can help you to debug click issues quickly when clickthroughs are not firing as expected.

Last updated on 16 July, 2018, 1:00pm by keston

Preface

Debugging click issues for simple ads or website builds is normally straightforward. However, for complex front-end work with animated or absolute positioned elements with z-index or translate Z values - it can become... tricky.

I use the following snippet, along with the custom snippet plugin for brackets (https://github.com/chuyik/brackets-snippets) - to console log which target element is being accessed/clicked.

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

Use Cases

Some use cases might be

1) Double firing clickthroughs on display ads (clashing event listeners).

2) Z-index issue where an element could be covering a click area, preventing it from firing.