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