Question

你好，我想在点击子链接时停止启动父事件。这是我的代码：

$('.list_row_inputtype').on('click',function(event) {

    $(this).find('a.link_to_fire').click();
    event.stopPropagation();

    return false;
});


<div class="list_row_input_type unread"> 
    <a href="#" onclick="toogleRead(); return false;" class="toogleRead"></a>
    <a href="{corePath}/mails" class="link_to_fire">{emailLink}</a>
    <div class="description"></div>
</div>

当我点击“.toogleRead”时，它会触发该功能，但会更改为{corePath} / mails页面。我想阻止它改变页面。

Answer 1

您也应该通过jQuery在.toogleRead元素上添加事件处理程序。记住附加处理程序的位置更容易，它不会混合两种方式，并在HTML和Javascript之间添加更好的分离。

这是一个有效的演示http://jsfiddle.net/pomeh/uFV9R/。

HTML代码

<div class="list_row_input_type unread"> 
    <a href="#" class="toogleRead"></a>
    <a href="{corePath}/mails" class="link_to_fire">{emailLink}</a>
    <div class="description"></div>
</div>

Javascript代码

$('.list_row_input_type').on('click',function(event) {
    event.stopPropagation();
    // your stuff
});

$('a.toogleRead').on('click',function(event) {
    event.stopPropagation();
});

另一方面，在大多数情况下，使用jQuery从事件处理程序返回false是一种不好的做法。它做了太多事情，你通常只想做其中一个。以下是两个链接，详细解释了这一点http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/和http://css-tricks.com/return-false-and-prevent-default/。

Answer 2

您可以将明细事件放在a上吗？现在您不必担心事件传播。

$('.list_row_input_type.unread a.toggleRead').click(function(e) {
  e.preventDefault();
  toggleRead();
});

停止父事件jquery

2 个答案: