javascript - angularjs禁用范围鼠标事件

Question

我有一个类型为range的已禁用输入。我想监视包含禁用输入范围的 div 上的鼠标事件。问题是在某些区域(深灰色区域、 slider 轨道上值小于 slider 尖端的区域)，div 鼠标事件不会触发。

下面是代码和 Codepen:

<div class="list" style="background-color:yellow" ng-mouseup="mouseup()" ng-mousedown="mousedown()" >
    <input type="range" name="slider" min="0" max="100" ng-disabled="true" />
</div>      

http://codepen.io/anon/pen/mpoga

单击 slider 左侧的深灰色区域 - 您将看到事件未触发。有什么建议吗？

放置一个 div 覆盖解决了问题。

 <div style=" opacity:0; position: absolute;left: 0px;top: 0px;width:100%;height:100%;">

但是还有一个问题，如果鼠标抬起发生在父div之外，仍然不会触发该事件。无论指针位于哪个元素区域，我都应该监视鼠标向上事件吗？我怎样才能在 AngularJS 中做到这一点？而且我可能还需要在鼠标抬起时停止观看，并在鼠标按下时重新开始观看。 我该怎么做？

Answer 1

替代解决方案是使用 CSS 规则来使禁用的输入不捕获任何鼠标事件。

input[type="range"]:disabled {
  pointer-events: none;
}

希望这有帮助。