个人中心
gpt4 book ai didi

css - 'disable' 不会阻止 'onpointerup' 事件。是否有使用指针事件的 'onclick' 等效项？

转载 作者：太空宇宙 更新时间：2023-11-04 06:00:25 26 4
gpt4 key购买 nike

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

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

我后来发现我需要阻止用户单击按钮，最简洁的方法是使用“禁用”标签。在深入研究 React 和样式化组件数小时后(实际上当我开始写这个问题时)它让我震惊——当然 '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>

嗯，结果(现在)都在意料之中。 唯一 元素不会使某些事情发生是使用“onclick”的禁用按钮。

所以...

  1. 是否有使用指针事件获得“禁用的‘onclick’”功能的好方法？
  2. “onclick”是否如此普遍以至于不值得为指针事件进行标准化？

谢谢大家!

最佳答案

我认为 CSS pointer-events 属性可能适合您。

html

<button class="mybutton">

CSS

.disablePointerEvents {
    pointer-events: none;
}

JS

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

来自MDN documentation ，具有 none 值:“该元素永远不是指针事件的目标”

关于css - 'disable' 不会阻止 'onpointerup' 事件。是否有使用指针事件的 'onclick' 等效项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57343906/

26 4 0
文章推荐： linux - 在unix awk中将utc时间戳转换为est
文章推荐： c - Strncmp - 错误的逻辑
文章推荐： linux - ` time ./AnyExecutable` 在 Linux 或 bash 脚本中意味着什么？
文章推荐： javascript - CSS 对齐和边距问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com