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

Posted 2021-04-30

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

我非常相信可以通过某种巧妙的方法来做到这一点，尽管我认为这不是跨浏览器的。但是在这一点上，对我而言并不重要，什么浏览器供应商允许我执行此操作。

因此，我需要一种方法来例如禁用所有特定的事件回调。因此，我需要能够阻止任何点击事件被触发的功能。在所有这些不错的浏览器（Chrome，Firefox，Safari，Opera）上是否有可能？因为有了它将为我提供一种隔离什么事件类型和什么事件回调是瓶颈根源的方法。

[在有人建议我使用Chrome开发者工具中的“脚本”标签设置事件监听器断点之前，我已经发现单击特定文本字段似乎是问题所在（它会触发4次点击回调，并且显然存在一个[这里有很多事件委派），但我想在浏览器级别禁用点击事件，以检查我是否真的在正确的路径上以准确地找到瓶颈元凶。

答案

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

另一答案

我的攻击方式是根据某些全局变量内容使附加这些事件的功能短路。

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

即

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

另一答案

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

jQuery: Trap all click events before they happen?

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

我认为这是要走的路

另一答案

我制作了一个sample on jsfiddler，它可以满足您的需要。您可以将其扩展到其他类型的事件中。

基本上，我要遍历所有分配有事件的元素，并检查它们是否具有click事件（仅检查一个，因此检查[...].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）以使该事件仅用于演示]]