Обнаружение события щелчка в любом вложенном элементе определенного 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

Поскольку вы попросили пример с базой, вот как прослушивать клики на 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 (div)) добавляет обработчик событий.