Question

我正在尝试为动态创建的元素处理click事件（因此不能使用.click jQuery调用）但同时，我不希望发生默认操作。基本上我想显示我的自定义UI而不是默认的UI。

jQuery(document).on('click', selector, function(e) {
    console.log('I got the event, let me try to stop other handlers ..');

    // none of these work
    e.preventDefault();
    e.stopImmediatePropagation();
    e.stopPropagation();

    // want show my UI here ...

    return false;
});

还尝试了mousedown事件。

但它不起作用，默认用户界面仍会显示。

注意：我不控制默认处理程序，不能改变它。

Answer 1

您可以使用off

从选择器中删除点击事件

这里你去工作片段：

$("#test").html('<button class="click">Click me to fire event</button><button class="clicktocancel">Click me to remove event</button>');

$("#test").on("click", ".click", function() {
  console.log("clicked")
})

$("#test").on("click", ".clicktocancel", function() {
  console.log("click cancelled")
  $("#test").off("click", ".click")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>

Answer 2

问题是事件以先到先得的方式执行。这意味着如果其他T事件在您之前被绑定然后在链中首先执行，要解决此问题，您可以使用off()删除绑定到该元素的所有点击事件，然后添加您的事件处理程序

所以在你的脚本之前写下这行代码

click

注意： jQuery(document).off('click', selector);仅删除使用off()

附加的事件

Answer 3

注意：以下内容主要适用于jQuery事件处理程序。通常不可能操纵未跟踪的事件处理程序分配，例如通过.addEventListener()添加的分配。

您需要确保您的事件处理程序是jQuery将事件传递给的第一个事件处理程序。 jQuery并不支持这种操作，因此需要进行一些黑客操作。

This answer，其中一条评论指出如何访问与元素关联的jQuery事件处理程序列表：

$._data($('#someElementId')[0]).events

由此，您可以安排自己的处理程序。

This answer显示了在执行此处理程序后如何阻止处理程序：

$('#someElementId').on('click', function(event){
    // do not pass this event to further jQuery event handlers
    event.stopImmediatePropagation(); 
    // ...
});

这些技术可以一起用于确保您的事件处理程序首先触发，然后利用它来阻止更多处理程序触发同一事件。

动态元素：如何防止其他jquery处理程序运行

3 个答案: