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>

在这个示例中，由于top div 位于 range 元素的顶部，因此我们无法选择 range（使用 IE、Microsoft Edge 和 Microsoft Edge(Chromium)）。

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

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

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

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

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