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

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

您可以检查单击的内容：

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

元素

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

与

此

相比

此

始终是绑定处理程序的事件<代码>事件。目标始终是事件发生的元素

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

对于文档中已知唯一的元素（基本上就是

正文

），您还可以检查

此

的

节点名

：

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

您必须执行

toLowerCase（）

，因为

nodeName

的大小写在不同浏览器中是不一致的

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

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

---

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

类Foo扩展了React.Component{
建造师（道具）{
超级（道具）；
this.eRef=React.createRef（）；
}
render（）{
返回(
{
如果（ev.target==this.eRef.current）console.log（“目标命中”）；
}}
>
也许点击我
);
}
}

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

从“React”导入React；
功能条（）{
返回(
{
if（ev.target==ev.currentTarget）console.log（“目标命中”）；
}}
>
点击我，也许测试不会触发命中
);
}

无论你做什么，都要提防停车。这将中断所有

.live

调用。

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