如何在父元素上始终捕获jQuery事件

Question

HTML：

<div class="parent">
     <div class="child"></div>
</div>

jQuery的：

$(".parent").on('click', callback);

问题在于取决于样式（特别是鼠标指针点击的位置），点击事件会在.child或.parent上触发，具体取决于鼠标的位置。

即使点击了.parent，是否有办法始终从.child获取活动？ 我以前用来解决这个问题的方法是检查$(event.target)的ID或类，如果它不是.parent那么我会$(event.target).parent()但是我需要一个适用于多种情况的解决方案而非修复。

Answer 1

使用event.currentTarget代替event.target。 event.currentTarget属性是事件冒泡阶段中的当前DOM元素，通常等于this。

event.currentTarget - 事件冒泡阶段中的当前DOM元素。

event.target - 发起事件的DOM元素。

$(".parent").on('click', callback);

function callback(event){

    alert( event.currentTarget === this );
}

为event.currentTarget - FIDDLE

提供帮助

为event.target - FIDDLE2

提供帮助

Answer 2

检查target是否为currentTarget。

if (event.target == event.currentTarget)

http://jsbin.com/jehuz/1/edit

Javascript：

$(".parent").on('click', function (event) {
    if (event.target == event.currentTarget) return;

    $(event.currentTarget);
}

示例javascript：

$(".parent").on('click', function (event) {
    $("p.1").text("target : "+event.target.className);
    $("p.2").text("currentTarget : "+event.currentTarget.className);
    if (event.target == event.currentTarget) {
        $(this).toggleClass("a");
    }
});

Answer 3

保持此代码原样：

HTML：

<div class="parent">
     <div class="child"></div>
</div>

jQuery的：

$(".parent").on('click', callback);

但添加：

$('.child').click(function() {
   //find the parent of the clild
   var parent = $(this).closest('.parent');
   //if it exists
   if (parent.length > 0)
   {
      //fire the click event, above, thus running 'callback'
      parent.click();
   }
});

那说这听起来像是XY Problem