JavaScript触发器中的Onmouseout事件

Question

似乎 .izberiLokacija 类中的 onmouseout 事件是由 <li> 中的 onmouseout 事件触发的。这是Javascript的工作方式还是我做错了什么。如果是这种情况，请提出一个可能的解决方案，仅在离开div 本身时激活 .izberiLokacija 类中的 onmouseout 事件......

<div class="izberiLokacija" onmouseout="alert('asd');toggleDivZaMalaMapa(2);">
          <ul>
                    <li onmouseover="toggleDivZaMalaMapa(1);">li1</li>
                    <li onmouseover="toggleDivZaMalaMapa(1);" style="border-top: solid 2px #00699B"> li2 </li>
          </ul>
</div>

Answer 1

这就是 JavaScript 的工作方式。要么在每个<li>上放置一个处理程序以防止冒泡（用event.stopPropagation()或通过返回false），或者测试event.target是否是您希望它在.izberiLokacija处理程序中的样子。阅读更多关于事件冒泡的信息，这应该可以消除混乱。

另一种方法是将onmouseout/onmouseover替换为 onmouseleave/onmouseenter .它们几乎是同一个事件，但后一对不会冒泡。

题外话：如果你从alert转移到console.log，你会更快乐;此外，内联JavaScript很难使用;考虑将JS和HTML分开。

Answer 2

每次将鼠标悬停在元素上时...将触发"悬停"事件。 事件也会冒出DOM树，并为它的每个父母点火......一直到身体标签。

请不要内联分配事件...这使得难以维护代码和臃肿的非语义标记。

相反，试试这个（使用jQuery...因为每个人都使用jQuery，对吧？

http://jsfiddle.net/ryanwheale/fab8Z/