不同的值e.target在浏览器中

Question

我想知道Mozilla和Chrome为什么还有e.target的其他价值。 我为你准备了这个例子。

https://jsfiddle.net/qdthnmdx/

在Mozilla e.target中有值：

<button type="button">

但在Chrome中，这是：

<span>Sometext</span>

这是一些错误吗？

Answer 1

你必须知道每个浏览器都有自己的JavaScript特定实现，这里我的代码会有不同的结果，即使在Internet探索和谷歌Chrone存在差异：

IE 11：

Google Chrome：

有关ECMA规范的更多说明，请参阅： http://www.ecma-international.org/publications/standards/Ecma-262.htm

Answer 2

event.target在浏览器中没有区别。

event.target是对调度事件的对象的引用。 当您连接到按钮时，它也会附加到span元素。 所以当你点击span时，它显示span节点，而on按钮显示的是右边的按钮，但这种行为在chrome上更明显，但在mozilla上却没有。

如果您只想在按钮元素上附加事件。你可以考虑做如下的

如果要在按钮和跨度单击上显示按钮，可以考虑在此处使用currentTarget。

currentTarget始终引用已附加事件处理程序的元素。

我想这可能会有用。

检查此代码段

document.querySelector("button").addEventListener("click", function(e) {
		console.log(e.currentTarget.nodeName);
});

button {
  border: 1px solid;
  background: 0;
  padding:10px;
}
span {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div id="id-div">
  <button type="button">
    <span>Sometext</span>
  </button>
</div>