【问题标题】:How to prevent the default handling of multiple clicking/tapping?如何防止默认处理多次单击/点击?
【发布时间】:2018-06-10 01:39:14
【问题描述】:

我正在开发一个用于音乐制作的简单网络工具。用户用鼠标反复点击一个区域或用手指轻敲它(在触摸屏上),该工具会计算点击的平均速度(例如,160bpm)。在我的例子中,该区域是一个output HTML 元素,但它也可以是任何其他元素。

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

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

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

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

【问题讨论】:

标签: javascript onclick click onclicklistener double-click


【解决方案1】:

为了防止在双击时选择:

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" />

注意:如果您使用响应式设计,这只是一个可行的解决方案

【讨论】:

  • 如果出现,您的第一个建议会清除选择;但我正在寻找一种解决方案来完全阻止选择。不幸的是,第二个建议适用于整个页面,因此不符合问题的第二个要求。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-11-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-10-19
  • 2013-05-18
相关资源
最近更新 更多