Question

点击jQuery中的元素会导致冒泡到正文。如果我们有一个绑定到主体的点击处理程序显示警报，那么点击任何元素将冒泡到正文并触发警报。我的问题是，是否有任何方法可以知道身体警报是否是由于直接点击身体而触发的，或者是因为气泡到身体而触发了点击。

Answer 1

将event.target与this进行比较。 this始终是处理程序绑定的事件; event.target始终是事件发起的元素。

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

对于您知道在文档中唯一的元素（基本上只是body），您还可以查看nodeName的{{1}}：

this

您必须执行$(document.body).click(function(event) { if (event.target.nodeName.toLowerCase() === 'body') { // event was triggered on the body } });，因为toLowerCase()的情况在浏览器中不一致。

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

nodeName

Answer 2

您可以查看点击event.target的内容：

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

Answer 3

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

请注意，jQuery“.delegate（）”工具可用于为您进行检查。

Answer 4

在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>
    );
  }
}

Answer 5

不确定是否可以回答您的问题，但是我也用

解决了类似的问题

event.isTrusted

当事件是由用户操作启动时触发的，而不是由另一个级联事件触发时触发的。

    if (event.isTrusted) {
        // do something

    }

Answer 6

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

  render() {
    const { styleTags, language, nonce } = this.props;

    return (
      <html lang={language}>
        <Head {...{ nonce }}>
          {styleTags}
        </Head>
        <body>
          <Main />
          <NextScript {...{ nonce }} />
        </body>
      </html>
    );
  }

有没有办法检查气泡是否触发了点击？

6 个答案: