Question

在我的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()运行之后发生，这是错误的吗？

Answer 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);
    }
});

Answer 2

我有一个类似的问题，并在使用时解决了

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

代替

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

Answer 3

这样做：

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

Answer 4

怎么样：

e.preventDefault();

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

Answer 5

我用这个黑客解决了它：

$(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;
});

event.stopPropagation（）在jQuery事件处理程序中不起作用

5 个答案: