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之外的点击是完全不同的，有很多方法可以实现它，但没有一个是完美的。

见：

就个人而言，我使用了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），添加一个事件处理程序。

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

3 个答案: