How to prevent the default handling of multiple clicking/tapping?

Question

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 (eg, 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 (eg 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.

Answer 1

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