使用 jQuery 事件委托忽略子元素答案

【问题标题】：Ignore child elements using jQuery event delegation使用 jQuery 事件委托忽略子元素
【发布时间】：2012-08-15 06:17:36
【问题描述】：

我正在使用 on 方法将点击事件委托给注入的 div。这些注入的 div 也将具有位于其父 div 之外的子 div。我希望忽略子 div 上的点击事件，但似乎无法弄清楚。这是一个例子：

这是一个小提琴： http://jsfiddle.net/7ULUJ/

这是 HTML

<div id="container">
<div class="click_this_one_only">
    click event delegated
    <div id="child1">
        child 1
    </div>
    <div id="child2">
        <div id="child_child">
            child child
        </div>
    </div>
</div>
</div>

这里是 jQuery：

$('#container').on('click', '.click_this_one_only', function() {

   alert('you just clicked .' + $(this).attr('id'));
});

【问题讨论】：

标签： jquery events delegation event-delegation

【解决方案1】：

检查元素的事件目标：

http://jsfiddle.net/7ULUJ/3/

$('#container').on('click', '.click_this_one_only', function(e) {
    if ($(e.target).hasClass("click_this_one_only")) {
        alert("clicked");
    }
});

【讨论】：