backbone.js 检测特定div的任何嵌套元素中的单击事件

r6l8ljro  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(120)

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

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

我尝试使用jquery,但我更喜欢使用 Backbone.js 。

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

不确定当用户点击div中包含容器类的一些嵌套元素时,我需要使用什么事件。基本上,我需要更新一个标志,以防用户在此div之外点击,但我不希望在侦听整个主体的事件处理程序上有一个大的范围。

7rtdyuoh

7rtdyuoh1#

既然您要求提供一个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外部的点击是完全不同的,有很多方法可以实现,但没有一种是完美的。
请参阅:

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

vxf3dgd4

vxf3dgd42#

也许是这个?:

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

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

6tr1vspr

6tr1vspr3#

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

var flag = 'whatever';

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

本质上,对于类容器(在本例中为div)的所有子元素,添加一个事件处理程序。

相关问题