Question

如何仅在外部div上生成click事件，而不是单击其子级

var TodoView = Backbone.View.extend({
    template: _.template(''),
    events: {
        'click #main-content li': 'AccordionChangingIcons', //For user li click event
    },
});

这是HTML代码。

<li class="icon-left" id="1"><i class="icon-glass"></i><span class="om-drag"></span><span class="om-delete"></span><h3 contenteditable="true" class="item">title1-goes-here</h3><div contenteditable="true" style="max-height: 100px; display: block;" class="content">   Content goes here1 check here</div></li>

Answer 1

Backbone使用事件委托来附加事件侦听器，这在某些情况下比直接绑定的事件更复杂。

jQuery和Zepto中的事件委托（您没有指定是否在Backbone应用程序中使用任何一个，但我认为你这样做）的工作原理如下：

$( some_element ).on( event, selector, function(){} )

在Backbone中some_element是视图el元素引用，事件和选择器在您的示例中为click和#main-content li。因此click事件侦听器附加到视图el，当您单击视图中的任何位置时触发事件，然后jQuery / Zepto检查单击的元素是否匹配传递的选择器。这当然使得无法在视图el元素之外的元素上侦听事件。

现在要点：传递给这些库中的回调函数的事件是规范化的，但包括对原始（浏览器的本机）事件对象的引用。您可以使用它们来检查实际点击的内容以及是否要采取措施。

在您的示例中，您只想继续event.currentTarget === event.originalEvent.target。 currentTarget位于库的规范化事件对象中，始终引用您的li。 originalEvent.target是浏览器的本机事件目标，指的是实际单击的元素，它将引用从li开始的树中最深的嵌套节点。因此，如果两者都指向li，则用户点击它，而不是任何子项。

小提琴：http://jsfiddle.net/ZAbpD/1/

Answer 2

我认为这个问题可以这样解决： How do I detect a click outside an element?

通过为外部区域创建单独的视图或通过jquery附加外部事件：

var TodoView = Backbone.View.extend({
    template: _.template(''),
    events: {
        'click #main-content li': 'AccordionChangingIcons', //For user li click event
    },
    initialize: function() {
        $("html").on("click", this.outsideClick);
    },
    outsideClick: function() {
        //handle outside click
    },
    AccordionChangingIcons: function(event) {
        event.stopPropagation();
    }
});

在backbone.js中单击外部div时生成事件

2 个答案: