Internet Explorer 11 和 Edge 中伪元素的 CSS 指针事件

Question

所以我有一个范围输入，如下所示的css规则。目标是仅让范围的拇指响应指针事件。在Chrome和Safari中工作正常。但在 ie-11 和 Edge 中，整个输入停止工作。我知道指针事件是实验性的，但我也知道这两个浏览器都支持它，但也许不适用于伪元素？

input[type="range"] {
pointer-events: none;
}
input[type="range"]::-webkit-slider-thumb {
pointer-events: auto;
}
input[type="range"]::-ms-thumb {
pointer-events: auto;
}

Answer 1

首先，请参考以下示例：

<style>  
.bottom {
background: yellow;
width: 600px;
height: 200px;
}
.top {
width: 600px;
height: 200px;
position: absolute;
top: 0;
left: 0;
/*pointer-events: none;*/
}
.test{
/*pointer-events: none;*/
}
div{
display:block;
}
</style>
<div>
<!-- bottom div -->
<div class="bottom">
<br>
<input type="range"/>
<br>
<input type="range"  class="test"/>(pointer-events: none)
<br>
</div>
<!-- top div -->
<div class="top">
</div>
</div>

在此示例中，由于divtop位于范围元素的顶部，因此我们无法选择范围(使用 IE、Microsoft Edge 和 Microsoft Edge(Chromium((。

在顶级类中添加pointer-events: none;后，他们可以选择。

然后，如果我们在IE浏览器和Microsoft Edge(铬(中为第二个范围元素添加pointer-events: none;，则无法选择第二个范围输入。但在Microsoft边缘 (Microsoft 边缘 41.16299.1480.0( 中，仍然可以选择它。看来这是Edge浏览器的默认行为或问题，我会反馈这个问题。 因此，您可以考虑使用此方法添加 topdiv。

其次，由于新的Microsoft Edge是基于铬的，因此您可以尝试安装新的Microsoft Edge并使用它。

此外，我认为还有另一种选择，您可以使用 JQuery 脚本来查找范围输入元素并使用禁用属性来启用/禁用它。

$("input[type='range']")[1].disabled = true; //disable