CSS события указателя для псевдоэлементов в inte rnet explorer 11 и Edge - PullRequest
Новая
       19

CSS события указателя для псевдоэлементов в inte rnet explorer 11 и Edge

0 голосов
/ 05 февраля 2020

Итак, у меня есть диапазон ввода с правилами 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;
}

1 Ответ

0 голосов
/ 06 февраля 2020

Сначала, пожалуйста, обратитесь к следующему примеру: 

<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 находится в верхней части элемента диапазона, поэтому мы не можем выбрать диапазон (используя IE, Microsoft Edge и Microsoft Edge (Chromium)).

После добавления pointer-events: none; в верхний класс они могут выбирать.

Затем, если мы добавим pointer-events: none; для второго элемента диапазона, в браузере IE и Microsoft Edge (хром), второй вход диапазона не может быть выбран. Но в Microsoft Edge (Microsoft Edge 41.16299.1480.0) его все равно можно выбрать. Кажется, что это поведение или проблема браузера Edge по умолчанию, я сообщу об этой проблеме. Итак, вы можете использовать этот метод для добавления верхнего div.

Во-вторых, поскольку новый Microsoft Edge основан на хроме, вы можете попробовать установить новый Microsoft Edge и использовать его.

Кроме того, я думаю, что есть другой выбор, вы можете использовать скрипт JQuery, чтобы найти элементы ввода диапазона, и использовать свойство disabled, чтобы включить / отключить его. 

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