javascript - 检测特定 div 的任何嵌套元素中的单击事件

Question

我需要能够检测到类引用的特定容器内发生的任何点击，如果用户单击任何嵌套元素，我应该能够检测到该点击并更新标志

<div class="container" >
   <div class="x1">
   <div class="x2">
      <div class="">
         <span class="">
         <ul class="">
   </div>
</div>

我尝试使用jquery，但我更喜欢使用backbone。

//$(document).on('click','.container', function(e){
//$('.container').delegate("div", "click", function(e) {

不确定当用户单击具有容器类的 div 中的某些嵌套元素时我需要使用什么事件。基本上，我需要更新一个标志，以防用户在该 div 之外单击，但我不想在监听整个主体的事件处理程序上有很大的范围。

Answer 1

由于您要求提供 Backbone 示例，因此以下是如何监听 div 及其子级的点击。

var View = Backbone.View.extend({
    className: "my-test-view",
    template: '<div class="container"><div class="x1"><div class="x2">test</div></div></div>',
    events: {
        'click .container': 'onClick',
    },

    render: function() {
        this.$el.empty().append(this.template);
        return this;
    },

    onClick: function(e) {
        console.log("clicked on", e.target, " triggered from ", e.currentTarget);
    },
});

var view = new View();

$("body").append(view.render().el);

单击测试文本应输出:

clicked on <div class=​"x2">​test​</div>​  triggered from  <div class=​"container">​…​</div>​

使用 jQuery，上面的内容(大致)相当于:

$('.my-test-view').on('click', '.container', function(e) {
    console.log("clicked on", e.target, " triggered from ", e.currentTarget);
});

但对于大多数情况，这应该足够了:

$('.container').on('click', function(e) {
    console.log("clicked on", e.target, " triggered from ", e.currentTarget);
});

不要使用.children().on(...)，因为这将为每个子项创建一个新的监听器，而且效率低下。

检测 div 外部的点击是完全不同的，有很多方法可以实现它，但没有一个是完美的。

参见:

• Backbone view with custom event to detect clicks outside of it
• How to detect a click outside an element?
• Use jQuery to hide a DIV when the user clicks outside of it

就我个人而言，我使用了 focus 和 blur 事件(不要忘记元素上的 tabindex="-1")。