0

如何仅在外部 div 上生成点击事件，而不是在其子项的点击上生成点击事件

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>
4

2 回答 2

2

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

jQuery 和 Zepto 中的事件委托（您没有指定是否在 Backbone 应用程序中使用其中任何一个，但我假设您这样做了）的工作方式如下：

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

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

现在重点：在这些库中传递给回调函数的事件被规范化，但包括对原始（浏览器的本机）事件对象的引用。您可以使用两者来检查真正点击的内容以及是否要采取行动。

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

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

于 2013-08-22T09:02:08.120 回答
0

我认为这个问题可以这样解决： 如何检测元素外的点击？

通过为外部区域创建单独的视图或通过 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();
    }
});
于 2013-08-22T09:13:34.650 回答