'disable' 不会阻止 'onpointerup' 事件。是否有使用指针事件的 'onclick' 等价物？

Question

使用 'disabled' css 属性不会阻止 'onpointerup' 事件被相关函数处理。使用指针事件实现 'onclick' 功能（特别是当元素具有 'disabled' 状态时不为 'onclick' 分派事件处理程序）的最佳方法是什么？

我正在构建一个使用 Web 蓝牙的 React 应用程序（并在此过程中学到了很多东西）。 Web Bluetooth 需要一个 'onpointerup' 事件来开始选择设备，我很想在应用程序的其余部分使用 Pointer Events 以实现跨输入设备的可移植性。

我后来发现我需要阻止用户单击按钮，最简洁的方法是使用 'disable' 标记。在深入研究 React 和 styled-components 数小时后（实际上当我开始写这个问题时）它让我震惊——当然 'onpointerup' 仍然适用于 'disabled' 元素（因为指针仍然在上面并举起...)

这是一个基本的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>

嗯，结果（现在）都在意料之中。 only 元素不会使某些事情发生是使用 'onclick' 的禁用按钮。

所以...

是否有使用指针事件获得 "disabled 'onclick'" 功能的好方法？
是否 'onclick' 如此普遍以至于不值得在指针事件上进行标准化？

谢谢大家！

Answer 1

我认为 CSS pointer-events 属性对你有用。

html

<button class="mybutton">

CSS

.disablePointerEvents {
    pointer-events: none;
}

JS

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

来自 MDN documentation，none 值："The element is never the target of pointer events"

'disable' 不会阻止 'onpointerup' 事件。是否有使用指针事件的 'onclick' 等价物？

'disable' does not prevent 'onpointerup' event. Is there an 'onclick' equivalent using Pointer Events?

css

pointer-events

disable