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

Question

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

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

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

//$(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);

单击test 文本应输出：

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"）。

Answer 2

也许是这个？：

$(document).on('click','.container *', function(e){
console.log(e.target);
});

jQuery 的优点在于您可以使用与 CSS 相同的选择器，因此我使用 .container * 来定位容器内的所有元素。

Answer 3

我使用了 jquery .children() 方法。查看this code pen。

var flag = 'whatever';

$(.container).children().on('click', function() {
  flag = 'updated';
});

本质上，对于任何元素的所有子元素都是类容器（在本例中为 div）添加一个事件处理程序。