禁用浏览器页面的特定事件

Question

我的目标是找到给定页面中的 Javascript 事件瓶颈，无论是点击、聚焦文本字段还是类似的东西。

我非常相信有一些巧妙的方法可以做到这一点，尽管我不认为这是跨浏览器的东西。 但在这一点上，哪个浏览器供应商允许我做这样的事情对我来说并不重要。

因此，我需要一种方法，例如，禁用要调用的所有特定事件回调。 因此，我需要能够防止触发任何点击事件。 这在任何不错的浏览器（Chrome、Firefox、Safari、Opera）上都可能实现吗？ 因为拥有它会给我一种方法来隔离什么事件类型和什么事件回调是瓶颈来源。

在有人建议我使用 Chrome 开发人员工具中的脚本选项卡设置事件侦听器断点之前，我已经发现单击特定文本字段似乎是问题所在（它触发了 4 个单击回调，显然有很多事件委托），但我想在浏览器级别禁用点击事件，以检查我是否真的在正确的路径中准确定位瓶颈的罪魁祸首。

Answer 1

我认为没有任何优雅的方法可以做到这一点，一种方法是编写一些代码来获取所有元素并将所有事件绑定设置为 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;
    }
}

Answer 2

我要解决的方法是根据一些全局变量内容使附加这些事件的函数短路。

几乎每个 js 库都将事件处理程序包装在一个函数中，您所要做的就是添加一些代码以在设置了某些变量时跳过调用实际侦听器。

IE

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

在包装的侦听器中：

// 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);
}

Answer 3

我认为此链接可以解决您的问题：

jQuery：在所有点击事件发生之前捕获它们？

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

我认为这是要走的路

Answer 4

我在 jsfiddler上做了一个示例，它可以满足您的需要.. 您可以将其扩展到其他类型的事件.. 不像詹姆斯邦德那样优雅，但可以解决问题

本质上，我正在浏览所有分配了事件的元素，并检查它们是否有点击事件（只检查一个，因此[...].click[0] ）并使用unbind函数

// 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 ：我故意“允许”第二个按钮（ btn2 ）保留事件只是为了演示