Question

我的目标是找到给定页面中的javascript事件瓶颈，无论是通过点击，聚焦文本字段还是其他类似的事情。

我非常确信有一些简洁的方法可以做到这一点，虽然我认为这不是跨浏览器的东西。但在这一点上，对我来说无关紧要的是什么浏览器供应商允许我做这样的事情。

所以，我需要一种方法，例如，禁用要调用的所有特定事件回调。因此，我需要能够阻止任何点击事件被触发。在任何这些不错的浏览器（Chrome，FF，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 lib都将事件处理程序包装在一个函数中，所有你需要做的就是添加一些代码，以便在设置某个变量时跳过调用实际的监听器。

即

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: Trap all click events before they happen?

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

我认为这是要走的路

Answer 4

我做了一个sample on jsfiddler来做你需要的东西......你可以把它扩展到其他类型的事件......不像詹姆斯邦德那样优雅，但是这个技巧

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

// 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）保留该活动仅用于演示

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

4 个答案: