Question

我有一个简单的HTML链接和Jquery代码，它首先防止默认。但随后我使用Jquery preventDefault

撤消unbind

$('body *').click(function(e){
e.stopPropagation();
e.preventDefault();
});


$('a').eq(0).unbind('click');
$('a')[0].click();

这很好用。但是当我在这样的段落中擦除链接时：

<p><a href="http://www.iana.org/domains/example">More information...</a></p>

当我指定这样的选择器时，它不再起作用了：

  $('p a').eq(0).unbind('click');

添加这个额外的选择器有什么特别之处？

JsFiddle的例子：http://jsfiddle.net/nb9Lck5p/2/

Answer 1

这是因为事件传播......你正在从a删除点击处理程序，但它仍然存在于p（父元素）中，所以当事件被冒泡到父元素调用其click处理程序，该处理程序调用prevent default，从而防止链接单击

的默认行为

停止事件传播

$('body *').click(function (e) {
    e.stopPropagation();
    e.preventDefault();
});


$('p a').eq(0).unbind('click').click(function(e){
    e.stopPropagation();
});
$('p a')[0].click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
    <a href="http://www.iana.org/domains/example">More information...</a>
</p>

但是你使用unbind的方式很危险，因为它会删除绑定到a元素的任何其他点击处理程序，而不是使用namespacing

$('body *').on('click.myhandler', function(e) {
  e.stopPropagation();
  e.preventDefault();
});


$('p a').eq(0).off('click.myhandler').click(function(e) {
  e.stopPropagation();
});
$('p a')[0].click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
  <a href="http://www.iana.org/domains/example">More information...</a>
</p>

Answer 2

在你的小提琴中，你绑定了('body *')上的事件，但你取消绑定'p a'选择器上的'click'事件。在这种情况下，您必须取消绑定/关闭'body *'上的活动，而不是'p'或'a'。

$('p a:first').on('click', function(e){
    alert('click');
    e.stopPropagation();
    e.preventDefault();
});

$('p a:first').off('click');
$('p a')[0].click();

我建议您使用.on，.off，而不是.bind，.unbind

Jquery unbind不适用于高级/多选择器

2 个答案: