javascript - 阻止 ng-mouseenter 和 ng-mouseout 触发内部元素

Question

我有一个无序列表，其中每个 li 都是一个固定的小尺寸，但是当您将鼠标悬停在它上面时，它会扩展到完整尺寸。这是通过 ng-mouseover 和 ng-mouseout 完成的。问题是一些 li 文本包含其他标记(例如)，当鼠标进入标签时，它会触发 mouseout 事件并折叠 li。

显然，期望的行为是当鼠标在其中时让 li 保持放大，即使它在子元素上也是如此。有没有人知道如何基本上忽略内部元素的鼠标悬停？如果它进入子元素，我还需要忽略 li 的鼠标移出。

Answer 1

有两种选择:

1. 使用 CSS pointer-events在你的内部元素上(但首先检查它在你的目标浏览器中的支持程度)。

2. 改用 ngMouseenter/ngMouseleave(请参阅 plnkr 了解 mouseenter/mouseleave 与 mouseover/mouseout 之间的不同行为)