我正在研究一种用于音乐制作的简单Web工具。用户用鼠标反复点击区域或用手指轻敲(在触摸屏上),并且工具计算点击的平均速度(例如,160bpm)。在我的例子中,该区域是一个output
HTML元素,但它也可能是任何其他元素。
由于点击或敲击可能非常频繁地发生,因此设备可以将其视为不是常规点击,而是双击或双击。在第一种情况下,区域的内容被选中,因为它是双击的默认结果;在第二种情况下,网页不是捕捉点击,而是缩放(例如在iOS中)。
如何防止桌面和触摸屏的不良行为?一些重要的要求:
要防止双击选择:
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" />
注意:如果您使用响应式设计,这只是一个可行的解决方案