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

【问题标题】：How to capture jQuery event always on the parent element如何始终在父元素上捕获 jQuery 事件
【发布时间】：2014-07-08 09:23:40
【问题描述】：

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()，但我需要一个适用于多种场景的解决方案，而不是修复。

【问题讨论】：

点击功能让你试试这个 event.preventDefault()
类似：stackoverflow.com/questions/2457246/…

标签： javascript jquery

【解决方案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 的小提琴

【讨论】：

您的回答是正确的（@horssujet 相同）！谢谢我只需要使用$(event.currentTarget)
你能更新你的答案吗？注意到人们只需要使用$(event.currentTarget)

【解决方案2】：

检查目标是否为 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");
    }
});

【讨论】：

谢谢！我只需要这样做：$(event.currentTarget) 你能更新你的答案吗？
` if (this == event.currentTarget) return;` 我认为这是错误的..我们甚至不需要做检查吗？
@JadJoubran if (this == event.currentTarget) 检查当前元素和点击的元素是正确的。如果对此有任何疑问，请参阅我的小提琴
是的，但不需要检查这是否 === event.currentTarget 因为我需要父母和孩子的两个事件，但我总是想获得 event.currentTarget 的 revence（ .parent 在示例中）这就是您的解决方案正确的原因
1 和 2 不是有效的类名。 What characters are valid in CSS class selectors?

【解决方案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

【讨论】：