Disable specific event for browser page

Question

I'm aiming to find Javascript events bottlenecks in a given page, be it from a click, from focusing a text field or anything like that.

I'm very convinced there is some neat way to do this, although I don't think it's something cross-browser. But at this point doesn't matter to me what browser vendor allows me to do such thing.

So, I need a way to, for example, disable ALL specific event callbacks to be called. So, I need the capability of preventing any click event to be triggered. Is that possible on any of those decent browsers (Chrome, Firefox, Safari, Opera)? Because having that would grant me a way to isolate what event type and what event callback is the bottleneck origin.

Before anyone suggests me to use the Script tab in the Chrome Developer Tools to set Event Listener Breakpoints, I already found out that clicking on a specific text field appears to be the problem (it triggers 4 click callbacks, and apparently there is a lot of event delegation there), but I'd like to disable click events at browser-level to check if I'm really in the right path to locate precisely the bottleneck culprit.

http://www.quirksmode.org/js/events_order.html#link9 does this help? — Guilherme, Apr 13 '12 at 20:42

score 3 · Answer 1 · answered Apr 13 '12 at 13:24

I don't think there is any elegant way to do it, one way would be to write a bit of code that grab all elements and set all event binding to null

var events = 'click change focus'.split(' '), // add more as needed
    eLen = events.length,
    eI = 0,
    els = document.getElementsByTagName('*'),
    len = els.length,
    i = 0,
    el;

for (; i < len; i++) {
    el = els[i];
    for (eI = 0; eI < eLen; eI++) {
        el['on' + events[eI]] = null;
    }
}

Gabriel Gilini · Answer 2 · 2012-04-13T15:33:15.357

The way I would attack this would be short-circuiting the functions that are attaching these events, based on some global variable content.

Pretty much every js lib out there wraps the event handler in a function, all you'd have to do is add a bit of code to skip calling the actual listener if some variable is set.

I.e.

var DO_NOT_FIRE = ['click', 'change'];

And inside the wrapped listener:

// I'll just assume Array.prototype.indexOf is present for the sake of clarity
if(DO_NOT_FIRE.indexOf(eventType) == -1)
{
    originalListener.call(_this, evt);
}

score 0 · Answer 3 · edited May 23 '17 at 11:49

0

I think this link solves your problem:

jQuery: Trap all click events before they happen?

document.addEventListener('click', function(e) {
    e.stopPropagation();
}, true);

I think it's the way to go

edited May 23 '17 at 11:49

Community

1
1

answered Apr 13 '12 at 13:28

Enrique Paredes

467
3
5

That would work if didn't have document-click events attached before in the queue, wouldn't it? Either way, I could also remove those pre-attached document-click events and then attach the callback above. I just thought that it could exist some browser-friendly way of doing this. – leandroico Apr 13 '12 at 13:33
Check the answer in the oher stack, with the `true` in the `addEventListener` method, you're setting this event to the capture phase, so it will trigger first even if it's the last lines of code, or if you're writing down in the console – Enrique Paredes Apr 13 '12 at 17:36

score 0 · Answer 4 · answered Apr 13 '12 at 14:10

I've made a sample on jsfiddler which does what you need.. you can extend it to other types of events.. not as elegant as James Bond, but does the trick

Essentially, I'm going through all elements that have events assigned to it, and checking whether they have a click event (checking just for one, hence [...].click[0]) and using the unbind function

// some elements that I'll bind a click event handler through jquery
<input type="button" id="btn1" value="click 1" />
<input type="button" id="btn2" value="click 2" />
<input type="button" id="btn3" value="click 3" />

// bind all buttons to some fake click handler
var btn_Click = function(e) {
    alert("clicked button " + $(this).attr("id")); 
};

$("input[type='button']").on("click", btn_Click);

// defining which events to block
var events_to_block = ['click'];

// filtering and unbinding the handler for click 

var x = document.getElementsByTagName("*");
$(x).each(function() {
    var x_events = $.data(this, 'events' );
    if(x_events !== undefined) { 
        if(-1 != events_to_block.indexOf("click")) {
            if((x_events.click !== undefined) && (x_events.click !== null)) {
                if($(this).attr("id") !== "btn2") {
                   $(this).unbind("click", x_events.click[0].handler);
                }
            }
        }
    }
});

PS: I've purposely 'allowed' the 2nd button (btn2) to keep the event just for demonstration

Disable specific event for browser page

4 Answers4