«отключить» не предотвращает событие «onpointerup». Существует ли эквивалент «onclick» с использованием событий указателя?

Использование свойства css «отключено» не препятствует обработке событий «onpointerup» связанной функцией. Каков наилучший способ добиться функциональности «onclick» (в частности, чтобы обработчики событий не отправлялись для «onclick», когда элемент имеет состояние «отключено») с использованием событий указателя?

Я создаю приложение React, использующее Web Bluetooth (и многому учусь). Веб-Bluetooth требует события onpointerup, чтобы начать выбор устройств, и я очень хотел использовать события указателя в остальной части приложения для их переносимости между устройствами ввода.

Позже я обнаружил, что мне нужно запретить пользователю нажимать кнопку, и самый простой способ сделать это — использовать тег «отключить». После нескольких часов погружения в React и стилизованные компоненты (и на самом деле, когда я начал писать этот вопрос) меня осенило — конечно, «onpointerup» по-прежнему применяется к «отключенному» элементу (потому что указатель все еще был на нем и поднят вверх. ..)

Вот простой пример html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script>function something(){ console.log('something happened');}</script>

    <div>
      <!-- This is what I wanted to use... -->
      <button           onpointerup="something()">Do Something onpointerup</button>
      <button disabled  onpointerup="something()">Do Something onpointerup</button>
    </div>

    </div>
      <!-- But this is what I found to work... -->
      <button           onclick="something()">Do Something onclick</button>
      <button disabled  onclick="something()">Do Something onclick</button>
    </div>
  </body>
</html>

Что ж, результаты (теперь) все ожидаемы. Единственный элемент, который ничего не делает, — это отключенная кнопка, которая использует 'onclick'.

So...

  1. Есть ли хороший способ получить функциональность «отключенного onclick» с помощью событий указателя?
  2. Является ли «onclick» настолько вездесущим, что не стоит пытаться стандартизировать события указателя?

Спасибо всем!


css disable pointer-events
person oclyke    schedule 04.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, вам может подойти свойство CSS pointer-events.

html

<button class="mybutton">

CSS

.disablePointerEvents {
    pointer-events: none;
}

JS

document.querySelector(".myButton").classList.toggle("disablePointerEvents");

Из документации MDN со значением none: «Элемент никогда не является целью событий указателя»

person Pierre-Yves Legeay    schedule 04.08.2019
comment
Спасибо, Пьер - CSS-свойство pointer-events выглядит полезным. Я думаю, например, что его можно было бы легко использовать вместе с React Styled Components. - person oclyke; 24.08.2019