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

Question

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

我有一个表格，我希望每行在单击时都突出显示。每个单元格还包含一些超链接。问题是当我尝试单击链接时，单元格也会突出显示，这不是我想要的。我可以找到一个解决方法，即将“click”事件绑定(bind)到所有超链接(请参阅下面的“dummy”函数)，然后使用 e.stopPropagagtion()。这可行，但似乎这不是一个干净的方法，有什么建议吗？谢谢!

这是我的表格行 View

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()