event.stopPropagation() 在 jQuery 事件处理程序中不起作用答案

【问题标题】：event.stopPropagation() is not working in jQuery event handlerevent.stopPropagation() 在 jQuery 事件处理程序中不起作用
【发布时间】：2015-03-13 20:24:22
【问题描述】：

在我的 jQuery 移动应用程序中，我有这段代码

$(context).on("click", ".search-person", function() {
    var id = $(this).attr("data-id");
    PROFILE_MODULE.getProfile(id);
});

$(context).on("click", ".search-person .ui-checkbox .ui-btn", function(e) {
    //toggle checkbox
    $(this).click();
    //don't change page
    e.stopPropagation();
});

.search-person 是表格行，.search-person .ui-checkbox .ui-btn 是行中列中的复选框。

如果我单击该复选框，我不希望触发行单击事件。但在这段代码中，e.stopPropagation() 运行后仍然如此，这是怎么回事？

【问题讨论】：

标签： javascript jquery jquery-mobile jquery-events event-propagation

【解决方案1】：

e.stopPropagation(); 确实停止了事件的传播，但它不会阻止 $(context).on("click", ".search-person", function() {}); 调用其处理程序，它们是不同且不同的事件。

您可以通过向与tr 匹配的选择器添加元素类型条件来解决此问题：

"tr.search-person"

现在选择器不匹配 checkboxes 和 search-person 类。

这是一个完整的例子：

var context = $('table');

$(context).on("click", "tr.search-person", function() {
  alert('row');
});

$(context).on("click", ".search-person.ui-checkbox.ui-btn", function(e) {
  alert('check box');
  // this.click(); will also work but why bother 
  // if all you are doing is clearing the checkbox
  $(this).prop('checked', !$(this).prop('checked'));
  e.stopPropagation();
});

tr.search-person {
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr class="search-person">
    <td>Click Here and the Check Box</td>
    <td>
      <input class="search-person ui-checkbox ui-btn" type="checkbox">
    </td>
  </tr>
  <tr class="search-person">
    <td>Click Here and the Check Box</td>
    <td>
      <input class="search-person ui-checkbox ui-btn" type="checkbox">
    </td>
  </tr>
</table>

或者，您可以查看触发事件的元素类型：

$(context).on("click", ".search-person", function() {
    if ($(this).is('tr')) {
        var id = $(this).attr("data-id");
        PROFILE_MODULE.getProfile(id);
    }
});

【讨论】：

@omega 请查看我的回答，了解正在发生的事情以及如何预防。

【解决方案2】：

我也遇到过类似的问题，用的时候解决了

$(selector).click(function(){ ... })

而不是

$(context).on("click", selector, function(){ ... });

【讨论】：

【解决方案3】：

这样做：

$(context).on("click", ".search-person .ui-checkbox .ui-btn", function(e) {
    //toggle checkbox
    this.checked = !this.checked;
    //don't change page
    e.stopPropagation();
});

【讨论】：

这也是 jquery mobile 复选框，所以我需要重新绘制它。
@omega，然后调用函数重绘它，但不要调用this.click方法，因为它实际上会重新触发点击事件，就这么简单，或者只使用css渲染选中/未选中的复选框，任何适合你的东西

【解决方案4】：

怎么样：

e.preventDefault();

您可能还需要从处理程序返回 false。

【讨论】：

我认为代码初始代码有效，但是当我执行 .click() 时，它会导致发生新的事件传播。

【解决方案5】：

我用这个 hack 解决了这个问题：

$(context).on("click", ".search-person", function(e) {
    if (!e.hasOwnProperty('_clickedName')) {
        var id = $(this).attr("data-id");
        PROFILE_MODULE.getProfile(id);
    }
});

$(context).on("click", ".search-person .ui-checkbox .ui-btn", function(e) {
    e['_clickedName'] = true;
});

【讨论】：