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

Question

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

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

Answer 1

有两种选择：

1. 在您的内部元素上使用 CSS指针事件（但首先检查它在目标浏览器中的支持程度）。

2. 改用 ngMouseenter/ngMouseleave（有关mouseenter /mouseleave 与 mouseover/mouseout 之间的不同行为，请参阅此plnkr ）