如何防止子点击事件冒泡到父级？

Question

我是Backbone的新手，这是我的情况：

我有一张桌子，我希望每一行在点击时都会突出显示。每个单元格还包含一些超链接。问题是当我尝试点击链接时，单元格也会突出显示，这不是我想要的。我可以找到一种解决方法，即绑定＆＃39;点击＆＃39; event到所有超链接（请参阅下面的＆＃39; dummy＆＃39;函数），然后使用e.stopPropagagtion（）。这是有效的，但似乎这不是一个干净的方式，任何建议？谢谢！

这是我的表格行视图

app.UserRowView = Backbone.View.extend({
  el: '',
  tagName:'tr',
  className:'badge-user-row',
  template: twig({ data: $("#jsid-table-row").html() }),
  model: null,
  events: {
    'click' : 'rowClicked',
    'click a': 'dummy',
  },
  initialize: function(user) {
    this.model = user;
    this.listenTo(this.model, 'change', this.render);
  },
  render: function() {
    var html = this.template.render({ user: this.model.toJSON() });
    this.$el.html(html);
    return this;
  },
  rowClicked: function(e) {
      console.log(e.currentTarget);
      this.$el.toggleClass('row-selected');
  },
  dummy: function(e) {
    e.stopPropagation();
  }
});

我的表格行模板：

    <td class="badge-cell"><input type="checkbox"></input></td>
    <td class="badge-cell">
      <div>{{ user.name }}</div>
      <a href="javascript:void(0)">Link 1</a>
    </td>
    <td class="badge-cell">
      {{ user.age }}
      <a href="http://google.com.hk">Link 2</a>
    </td>

Answer 1

如何在你的jQuery选择器中包含一个not？

$("#jsid-table-row:not(a)").html()

Answer 2

rowClicked: function(e) {
      console.log(e.currentTarget);
      if($(e.target).is("a") {
          this.dummy()
      } else {
          this.$el.toggleClass('row-selected');
      }
},

并删除“'点击''''虚拟''部分。我认为它会起作用