1

I am working on a simple Web tool for use in music making. A user repeatedly clicks an area with the mouse or taps it with his finger (on a touch screen), and the tool calculates the average tempo of the clicking (e.g., 160bpm). In my case, the area is an output HTML element, but it might as well be any other element.

Since the clicking or tapping can occur very frequently, the device can perceive it not as regular clicking, but as double clicking or double tapping. In the first case, the contents of the area get selected, because it is the default result of double click; in the second case, instead of catching a click, the webpage gets zoomed (e.g. in iOS).

How to prevent the unwanted behavior both for desktop and touch screens? Some important requirements:

  1. I look for a solution with pure JavaScript and native browser APIs, without jQuery or other frameworks.

  2. The solution should prevent extra-clicking in the aforementioned element only. If a user performs multiple clicks (or multiple taps) elsewhere on the webpage outside of this element, this should be processed as usual.

Hydrochoerus Hydrochaeris
  • 137
  • 2
  • 12
  • What did you try to accomplish such? You can, in any case, differentiate the double click event from the single click: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondblclick (be aware of the support though) – briosheje Dec 29 '17 at 16:34
  • @briosheje, I tried `preventDefault` for `dblclick` event; it didn’t work. – Hydrochoerus Hydrochaeris Dec 29 '17 at 16:36
  • https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html – Cody Ｇ Dec 29 '17 at 16:47
  • https://stackoverflow.com/questions/8825144/detect-double-tap-on-ipad-or-iphone-screen-using-javascript might help.... – Cody Ｇ Dec 29 '17 at 18:04

1 Answers1

0

To prevent selection on double clicking:

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

Example from: Prevent text selection after double click

To prevent zooming on mobile devices include the meta tag:

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

Note: This is only a viable solution if you use responsive design

Josh H
  • 246
  • 1
  • 10
  • your first suggestion clears a selection if it emerges; but I look for a solution to prevent the selection at all. And the second suggestion, unfortunately, works for the whole page and thus doesn’t meen the second requirement of the question. – Hydrochoerus Hydrochaeris Dec 29 '17 at 17:03