鼠标事件在按钮内的元素中不起作用（IE11）

【问题标题】：Mouse events are not working in element within button (IE11)鼠标事件在按钮内的元素中不起作用（IE11）
【发布时间】：2019-04-04 08:41:31
【问题描述】：

全部。 IE 有奇怪的情况，当按钮内带有鼠标事件的元素时 - 事件不会触发。这种情况不会在 Chrome 或 Firefox 中重现。不幸的是没有关于这种情况的信息，也许有人有同样的情况？

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">

<button>BUTTON
<div ng-mouseover="count = count + 1" ng-init="count=0">Mouse over me!</div>
</button>


<h1>{{count}}</h1>

<p>This example will increase the value of the variable "count" every time the mouse cursor moves over the DIV element.</p>

</body>
</html>

【问题讨论】：

标签： angularjs internet-explorer internet-explorer-11

【解决方案1】：

无论出于何种原因，IE11 都没有看到您将鼠标悬停在子 <div> 上，而是看到您将鼠标悬停在父 <button> 上。

这可以通过将ng-mouseover 属性移动到<button> 元素来解决。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">

<button ng-mouseover="count = count + 1" ng-init="count=0">
    BUTTON
    <div>Mouse over me!</div>
</button>

<h1>{{count}}</h1>

</body>
</html>

【讨论】：

不幸的是按钮有他自己的事件:(我找到了一个解决方案 - 使用按钮 - div。不是干净的解决方案，但是......