Question

简化：

我有一个网页。它有一些脚本，其中一个脚本将点击事件绑定到＆lt; a＆gt;。标签

$('#someId').click(function() {
    ......
});

我想在此页面添加纯javascript （我不允许修改其他js文件）并控制click事件。我试过的内容如下：

document.getElementById('someId').onclick = function (event) {
    if (someCondition) {
        // cancel this click event 
        event.preventDefault();
        event.stopPropagation();
        event.cancel = true;
        return false;
    } else {
        // do something else.
    }
};

这段代码似乎不起作用。我需要一些帮助。

更新

抱歉我的语言含糊不清。 “纯javascript”我的意思是“使用基本的javascript操作而不是jQuery方法。”

Answer 1

我想在此页面添加一个纯javascript（我不允许修改其他js文件）并控制click事件。

如果代码将在该页面上，它可以使用jQuery，这很好，因为这也是取消注册jQuery注册的处理程序的唯一方法：

$("#someId").off("click").on("click", function() {
    // Your new code here
});

在元素上调用.off("click")会从该元素中删除所有 jQuery注册的click处理程序。

也就是说，通常有一种更好的方法，而不是破坏页面上其他代码注册的处理程序。

为什么你不能在不使用jQuery的情况下取消注册jQuery注册的处理程序：第一次通过jQuery将特定事件挂钩到特定元素上时，jQuery注册一个处理程序（它自己的）以使用关于那个元素的那个事件;如果附加了更多处理程序，它只是将它们添加到自己的内部列表中，它不会在DOM中注册它们。相反，当触发DOM事件时，jQuery会遍历其处理程序列表并触发它们。

要取消注册jQuery在元素上的事件的实际处理程序，您必须获得对注册时使用的特定函数实例jQuery的引用。（removeEventListener没有相应的上述“清除所有这些”）。那个引用只能从jQuery的闭包中的数据结构中获得，所以如果不使用jQuery就无法实现它。

如果其他处理程序需要在$ .on（）块中的某些情况下恢复执行，我该怎么办？

啊，那要困难得多。这完全取决于您的问题中出现的更多上下文。一些选择：

到目前为止，最好的办法是修改处理点击的其他代码。但我知道你说你不能这样做。
jQuery按照注册顺序调用处理程序（这是处理多个处理程序本身的一个原因;不同的浏览器以不同的顺序执行操作）。因此，如果您可以在click 之前将#someId挂钩到其他代码之前，那么您可以可靠地使用event.stopImmediatePropagation()来阻止调用其他处理程序。当然，如果您的处理程序不是列表中的第一个，那么这将不起作用，因为其他处理程序将首先被调用。
如果#someId元素中有一个完全填充它的元素，您可以将click挂钩到那个元素上，然后使用{{1} }以防止事件冒泡到event.stopPropagation()元素。
当然，如果不是像＃3这样的元素，你可以插入一个（动态地，带代码）并将#someId的内容移入它，所以你可以将你的处理程序注入冒泡。
您可以深入了解jQuery的内部，并弄清楚如何访问事件处理程序链并对其进行操作。过去很容易;我认为最近的版本变得更难了。当然，这将进入无证领域，可能随着任何“点”发布而改变。

Answer 2

还有一种可能的解决方案，但遗憾的是它存在一些浏览器兼容性问题。关键是要使用css pointer-events属性和onmousedown事件，如下所示：

$('a').click(function() {
    alert('jquery');
});

var i = 0;
btn.onmousedown = function(ev) {
    if (i++ % 2 == 0) {
        btn.style.pointerEvents = 'none'; // disable clicks

        setTimeout(function() {
            btn.style.pointerEvents = 'auto'; // enable back in 500 ms
        }, 500);
    }
};

请参阅兼容性here，演示版为here

对于IE，您可以以相同的方式尝试元素disabled属性。

确定最好使用jQuery（如果已在项目中使用）

Answer 3

您需要在页面加载后添加点击侦听器。

window.onload=function(){
    //your code here.
};

如果您在单击后尝试禁用该按钮，请将“禁用”属性添加到该按钮并删除单击侦听器。

document.getElementById('someId').onclick = null;
document.getElementById('someId').disabled = true;

如何从纯JavaScript代码中取消jQuery.click？

3 个答案: