有什么方法可以检查气泡是否触发了点击？答案

【问题标题】：Is there any way to check if bubble triggered the click?有什么方法可以检查气泡是否触发了点击？
【发布时间】：2011-05-19 18:22:01
【问题描述】：

点击 jQuery 中的元素会导致冒泡。如果我们有一个绑定到显示警报的主体的单击处理程序，那么单击任何元素都会冒泡到主体并触发警报。我的问题是，有没有办法知道身体警报是由于直接点击身体而触发的，还是因为身体上的气泡而触发了点击。

【问题讨论】：

无论你做什么，都要小心 stopPropagation。这将中断所有.live 调用。

标签： javascript jquery

【解决方案1】：

比较 event.target 和 this。 this 始终是处理程序绑定的事件； event.target 始终是事件起源的元素。

$(document.body).click(function(event) {
    if (event.target == this) {
        // event was triggered on the body
    }
});

如果您知道文档中的元素是唯一的（基本上就是body），您还可以查看nodeName 的this：

$(document.body).click(function(event) {
    if (event.target.nodeName.toLowerCase() === 'body') {
        // event was triggered on the body
    }
});

你必须做toLowerCase()，因为nodeName的大小写在浏览器之间是不一致的。

如果您的元素有 ID，最后一个选项是与 ID 进行比较，因为它们也必须是唯一的：

$('#foo').click(function(event) {
    if (event.target.id === 'foo') {
        // event was triggered on #foo
    }
});

【讨论】：

【解决方案2】：

你可以用event.target查看点击了什么：

$(something).click(function(e){
    alert(e.target)
})

【讨论】：

【解决方案3】：

在 React 中，我们可以直接使用 currentTarget 和 target 来获取

import React from "react";

function Bar() {
    return (
            <div
               onClick={(ev) => {
                  if (ev.target == ev.currentTarget) console.log("Target hit");
                }}
             >
              Click me, maybe <div>test doesnt trigger hit</div>
            </div>
     );
}

【讨论】：

【解决方案4】：

传递给处理程序的“事件”参数有一个“目标”属性，它指的是作为事件直接目标的元素。您可以检查该属性以查看它是否是 <body> 元素。

请注意，可以使用 jQuery ".delegate()" 工具为您执行该检查。

【讨论】：

【解决方案5】：

在 React 中，您需要使用 React.createRef() 创建对组件的引用。像这样的：

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.eRef = React.createRef();
  }

  render() {
    return(
      <div
        ref={this.eRef}
        onClick={(ev) => {
          if (ev.target == this.eRef.current) console.log("Target hit");
        }}
      >
        Click me, maybe
      </div>
    );
  }
}

【讨论】：