Javascript MouseOut事件无法正常工作

在我的设计师的基础上给出了以下设计。实际上它是一个

td

元素。在

td

中有哪些元素都在

div的
中


html结构：

<td class="banner">
 <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
 </div>
</td>

问题在于
mouseout
气泡。因此，您将收到
td
的子元素的
mouseout
事件

两种选择：

很多使用主干网的人也使用jQuery。如果是的话，有一个由微软首创的相关活动，
mouseleave
，它不会冒泡——jQuery会在没有它的浏览器上为您填充它。因此，如果您正在使用jQuery（或者有任何其他脚本为您填充），您可以使用
mouseleave
而不是
mouseout
，这样就完成了

如果无法使用
mouseleave
，则在处理程序函数中，接受事件参数，然后检查事件起源的元素类型（
e.target.tagType
）：

这样，您就忽略了从子元素冒泡而来的事件，只查看来自
td
本身的事件

如果在
td
的子元素中不需要任何鼠标交互，则可以使用名为
指针事件的css属性

文件告诉我们：

指针事件：无
元素永远不是鼠标事件的目标；但是，如果子体的指针事件设置为其他值，则鼠标事件可能以其子体元素为目标。在这些情况下，在事件捕获/气泡阶段，鼠标事件将在往返子代的途中触发此父元素上的事件侦听器（视情况而定）

见：

在您的情况下，您可以尝试以下css规则：

td > div {
    pointer-events: none;
}

这样，该区域中触发的唯一事件将来自
td
元素

clearingBannerId:function(e){
  if (e.target.tagName.toUpperCase() === "TD") {
      console.log("hi");
  }
}

td > div {
    pointer-events: none;
}