e.stop需要传播以防止点击事件冒泡到父级

Question

我有一个木偶项目视图，它正在侦听对li的点击;下面 UI 中 ItemViews 的所有点击事件都被父li上的点击处理程序忽略。

我找到了一种涉及调用e.stopPropagation的解决方法，但似乎实际的解决方案可能是针对锚标记而不是 li。

一些示例代码：

var LiView = Marionette.ItemView.extend({
    events : {
        'click' : function(e){
            console.log(e.target);
        }
    }
});
var AnchorView = Marionette.ItemView.extend({
    events : {
        'click' : function(e){
            e.preventDefault();
            console.log(e.target);
        }
    }
});
new LiView({el: 'li'});
new AnchorView({el: 'li a'});

如果没有stopPropagation li click事件仍然会触发 - 就像你有多个jQuery点击处理程序时一样。问题是 e.target 将在两个点击处理程序中引用锚点 - 这是不可取的。

关于更好的结构方法有什么想法吗？

Answer 1

我只会使用e.stopPropagation因为这是事件冒泡应该如何工作的，并且您希望防止它冒泡。

由于您绑定到LiView中的click因此没有办法绕过该调用，除非您绑定到li中不是a a或父级的特定内容（因为冒泡在这里仍然是一个问题）。

另一种选择（在我看来很混乱）是检查LiView单击处理程序的内部e.target并e.currentTarget以确保它们是相同的（如果li本身是您想要单击的，除非其他元素冒泡是可取的）：

events: {
  'click' : function(e) {
    if(e.target == e.currentTarget) {
      // the person actually clicked on the LI and not something inside of it.
    }
  }
}