0

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

我正在构建一个使用 Web 蓝牙的 React 应用程序（并在此过程中学到了很多东西）。Web 蓝牙需要一个“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”的禁用按钮

所以...

  1. 有没有使用指针事件获得“禁用的'onclick'”功能的好方法？
  2. 'onclick' 是否无处不在，以至于不值得麻烦对指针事件进行标准化？

谢谢大家！

4

1 回答 1

1

我认为 CSSpointer-events属性可以为你工作。

html

<button class="mybutton">

CSS

.disablePointerEvents {
    pointer-events: none;
}

JS

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

来自MDN 文档，其none值为：“元素永远不是指针事件的目标”

于 2019-08-04T07:46:22.423 回答