javascript - 如何将 onclick 回调附加到 div 但不附加到 div 内的链接？

Question

HTML

<div class='item_container'>

[...bunch of links and pictures...]
<a class='item_owner'>John Doe</a>

</div>

Javascript

/**
    Bind the onclick only if you hover on the item since we got a lot
    of items and several events and plugins to setup on them.
*/
$('.item_container').live('mouseenter', function(e){
  $this = $(this);
  if (!$this.data('isSetup')) {
    $this.click(function(e){
      // do magic
      return false;
    });
     [... a lot of other stuff]
    $this.data({'isSetup': true});
  }
});

当然，当我单击 div 中的任意位置时，它会执行“变魔术”。感谢 return false，如果我点击 div 中的任何链接，它仍然会执行“魔术”并且不会更改页面，这是预期的行为。

但是有一个链接被假设为实际更改页面，即所有者链接。问题是，我目前的设置无法正常工作。

Answer 1

您需要停止从链接到父级 .item_container 的事件传播。

将此 block 添加到代码中:

$('.item_container a.item_owner').live('click', function(e){
 e.stopPropagation();
});