javascript - 如何防止多次单击/点击的默认处理?

标签 javascript onclick click onclicklistener double-click

我正在开发一个用于音乐制作的简单网络工具。用户用鼠标重复单击某个区域或用手指点击(在触摸屏上),该工具会计算点击的平均节奏(例如 160bpm)。就我而言,该区域是一个 output HTML 元素,但它也可能是任何其他元素。

由于单击或点击可能非常频繁地发生,因此设备不会将其感知为常规点击,而是双击或双击。第一种情况,该区域的内容被选中,因为这是双击的默认结果;在第二种情况下,网页会缩放(例如在 iOS 中),而不是捕获点击。

如何防止桌面和触摸屏出现不良行为?一些重要的要求:

  1. 我寻找一种使用纯 JavaScript 和 native 浏览器 API 的解决方案,无需 jQuery 或其他框架。

  2. 该解决方案应防止仅在上述元素中进行额外点击。如果用户在此元素之外的网页上的其他位置执行多次点击(或多次点击),则应照常处理。

最佳答案

要防止双击时选择:

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}

示例来自:Prevent text selection after double click

要防止在移动设备上缩放,请包含元标记:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

注意:只有使用响应式设计,这才是可行的解决方案

关于javascript - 如何防止多次单击/点击的默认处理?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48025558/

相关文章:

javascript - &lt;script&gt; 标签内的 Yii2 Jquery 代码

通过 url 执行 JavaScript 函数

javascript - 如何将图片添加到点击计数器文本显示中? <图像> <点击次数>

javascript - React 中的 OnClick 事件

javascript - 捕捉并停止中键点击

jquery - 如何在iPad上点击并长按?

javascript - 原型(prototype)中的 JQuery 等价物

javascript - 如何在 iframe 中跟踪用户

jQuery 无法使 .click 处理此代码

javascript - reactjs 无法将 this.props 传递给 react-chartist