Question

我有一个类型为range的已禁用输入。我想监视包含该禁用输入范围的div上的鼠标事件。问题是在某些区域（深灰色区域，滑块轨道上的区域小于滑块尖端的区域），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

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

使用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;
}

希望这有帮助。

Answer 2

禁用的输入正在停止事件传播。你可以绘制一个不透明度的div：0在顶部，并在你的输入被禁用时监听那里的事件。

编辑：这是你笔的一个分支：http://codepen.io/anon/pen/svjCo

容器的重要位是position:relative，而position:absolute的新div填充它。您不需要声明任何新的处理程序，因为点击从新div传播到其父容器中的点击处理程序。

确保将ng-hide或ng-show添加到新div中，以便仅在输入被禁用时显示。

angularjs disabled-range鼠标事件

2 个答案: