MouseOut事件无法正常工作

Question

我的设计师给出了以下设计。实际上它是td元素。td内的元素都在div's中。

html结构：

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

我在mouseout元素上写了一个td事件，它工作正常，但问题是偶数如果我将光标移动到td的任何元素，事件（{{1} }）触发相应的功能。

我想要的是，一旦光标离开mouseOut，那么只有它应该触发相应的功能。

我尝试了什么:(我在我的应用程序中使用td

marionette and backbone

Answer 1

问题在于mouseout 起泡。因此，您会收到mouseout的后代元素的td个事件。

两个选项：

1. 很多使用Backbone的人也使用jQuery。如果你是，微软开创了一个相关的活动，mouseleave，它不会冒泡 - 而jQuery会在没有它的浏览器上为你填充它。因此，如果你正在使用jQuery（或者有任何其他脚本可以为你填充它），你可以使用mouseleave而不是mouseout来完成。

2. 如果你不能使用mouseleave，那么在你的处理函数中，接受event参数，然后检查事件源自的元素的类型（e.target.tagType）：< / p>

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

   这样，你忽略了从后代元素冒出来的事件，只看到来自td本身的事件。

Answer 2

如果您不需要在td的子元素中进行鼠标互动，则可以使用名为pointer-events的css属性。

文档告诉我们：

  

指针 - 事件：无
  该元素永远不是鼠标事件的目标;但是，如果这些后代将指针事件设置为某个其他值，则鼠标事件可能会以其后代元素为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间在它们往返于后代的路径上触发此父元素上的事件侦听器。

请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

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

td > div {
    pointer-events: none;
}

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