Question

我有一个Marionette ItemView，它正在聆听li的点击;对于父li上的点击处理程序，将忽略以下ui中ItemView的所有点击事件。

我找到了一个涉及调用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，因为这是事件冒泡应该起作用的方式，并且你想要阻止它冒泡。

由于您绑定到click中的LiView，除非您绑定li中不属于a的特定内容，否则无法解决被调用的问题a或LiView的父母（因为冒泡在这里仍然存在问题）。

备选方案（在我看来很混乱）是检查e.target点击处理程序内部e.currentTarget和li以确保它们是相同的（如果{{ 1}}本身就是你想要点击的东西，除非需要冒泡其他元素）：

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

e.stopPropagation需要防止点击事件冒泡到父级

1 个答案: