web-dev-qa-db-fra.com

Comment écouter les triples clics en JavaScript?

S'il s'agit d'un double-clic:

window.addEventListener("dblclick", function(event) { }, false);

Comment capturer un triple-clic? Il s'agit d'un onglet épinglé dans Google Chrome.

javascriptgoogle-chromedom-events
49
Sam-Bo

Vous devez écrire votre propre implémentation de triple-clic car aucun événement natif n'existe pour capturer 3 clics consécutifs. Heureusement, les navigateurs modernes ont event.detail, que la documentation MDN décrit comme :

Nombre de clics consécutifs survenus dans un court laps de temps, incrémenté d'une unité.

Cela signifie que vous pouvez simplement vérifier la valeur de cette propriété et voir si elle est 3:

window.addEventListener('click', function (evt) {
    if (evt.detail === 3) {
        alert('triple click!');
    }
});

Démo de travail: http://jsfiddle.net/L6d0p4jo/

Si vous avez besoin de support pour IE 8, la meilleure approche consiste à capturer un double-clic, suivi d'un triple-clic - quelque chose comme ceci, par exemple:

var timer,          // timer required to reset
    timeout = 200;  // timer reset in ms

window.addEventListener("dblclick", function (evt) {
    timer = setTimeout(function () {
        timer = null;
    }, timeout);
});
window.addEventListener("click", function (evt) {
    if (timer) {
        clearTimeout(timer);
        timer = null;
        executeTripleClickFunction();
    }
});

Démo de travail: http://jsfiddle.net/YDFLV/

La raison en est que les anciens navigateurs IE ne déclencheront pas deux événements de clic consécutifs pour un double clic. N'oubliez pas d'utiliser attachEvent à la place de addEventListener pour IE 8.

61
Andy E

Depuis DOM niveau 2, vous pouvez utiliser le gestionnaire de clic de souris et vérifier le paramètre detail de l'événement qui doit être interprété comme:

L'attribut de détail hérité de UIEvent indique le nombre de fois qu'un bouton de la souris a été enfoncé et relâché sur le même emplacement d'écran pendant une action de l'utilisateur. La valeur d'attribut est 1 lorsque l'utilisateur commence cette action et incrémente de 1 pour chaque séquence complète de pression et de relâchement. Si l'utilisateur déplace la souris entre la souris et la souris, la valeur sera définie sur 0, indiquant qu'aucun clic ne se produit.

Ainsi, la valeur de detail === 3 vous donnera l'événement du triple-clic.

Plus d'informations dans les spécifications sur http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent .

Merci à @Nayuki https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail - une extension DOM3 qui est WIP https: // w3c .github.io/uievents /

17
Artem Oboturov

Voici le véritable événement Triple clic, qui ne se déclenche que lorsque les trois clics sont déclenchés à intervalle égal.

// Default settings
var minClickInterval = 100,
    maxClickInterval = 500,
    minPercentThird = 85.0,
    maxPercentThird = 130.0;

// Runtime
var hasOne = false,
    hasTwo = false,
    time = [0, 0, 0],
    diff = [0, 0];

$('#btn').on('click', function() {
    var now = Date.now();
    
    // Clear runtime after timeout fot the 2nd click
    if (time[1] && now - time[1] >= maxClickInterval) {
        clearRuntime();
    }
    // Clear runtime after timeout fot the 3rd click
    if (time[0] && time[1] && now - time[0] >= maxClickInterval) {
        clearRuntime();
    }
    
    // Catch the third click
    if (hasTwo) {
        time[2] = Date.now();
        diff[1] = time[2] - time[1];
        
        var deltaPercent = 100.0 * (diff[1] / diff[0]);
        
        if (deltaPercent >= minPercentThird && deltaPercent <= maxPercentThird) {
            alert("Triple Click!");
        }
        clearRuntime();
    }
    
    // Catch the first click
    else if (!hasOne) {
        hasOne = true;
        time[0] = Date.now();
    }
    
    // Catch the second click
    else if (hasOne) {
        time[1] = Date.now();
        diff[0] = time[1] - time[0];
        
        (diff[0] >= minClickInterval && diff[0] <= maxClickInterval) ?
            hasTwo = true : clearRuntime();
    }  
});

var clearRuntime = function() {
    hasOne = false;
    hasTwo = false;
    time[0] = 0;
    time[1] = 0;
    time[2] = 0;
    diff[0] = 0;
    diff[1] = 0;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click button three times with equal interval
<button id="btn">Click me</button>

Aussi, j'ai écrit plugin jquery TrplClick , qui active l'événement 'trplclick'

3
Deliaz

c'est très simple si vous le faites correctement, et vous pouvez même attraper des clics simples, doubles, triples, ... comme vous le souhaitez. javascript simple, délai de clics personnalisable (timeout):

var clicks = 0;
var timer, timeout = 350; // time between each click

var doubleClick = function(e) {
  console.log('doubleClick');
}

var tripleClick = function(e) {
  console.log('tripleClick');
}

// click timer
yourcontainer.addEventListener('click', function(e) {
  clearTimeout(timer);
  clicks++;
  var evt = e;
  timer = setTimeout(function() {
    if(clicks==2) doubleClick(evt);
    if(clicks==3) tripleClick(evt);
    clicks = 0;
  }, timeout);
});
1
Bernhard

pseudo-code:

var clicks = 0

onclick:
clicks++;
setTimer(resetClicksToZero);
if clicks == 3: tripleclickdetected(); clicks = 0;
1
Jack M

Je travaille sur un éditeur de code javascript et j'ai dû écouter le triple clic et voici la solution qui fonctionnera pour la plupart des navigateurs:

// Function to get mouse position
var getMousePosition = function (mouseEvent) {
    var currentObject = container;
    var currentLeft = 0;
    var currentTop = 0;
    do {
        currentLeft += currentObject.offsetLeft;
        currentTop += currentObject.offsetTop;
        currentObject = currentObject.offsetParent;
    } while (currentObject != document.body);
    return {
        x: mouseEvent.pageX - currentLeft,
        y: mouseEvent.pageY - currentTop
    }
}

// We will need a counter, the old position and a timer
var clickCounter = 0;
var clickPosition = {
    x: null,
    y: null
};
var clickTimer;

// The listener (container may be any HTML element)
container.addEventListener('click', function (event) {

    // Get the current mouse position
    var mousePosition = getMousePosition(event);

    // Function to reset the data
    var resetClick = function () {
        clickCounter = 0;
        var clickPosition = {
            x: null,
            y: null
        };
    }

    // Function to wait for the next click
    var conserveClick = function () {
        clickPosition = mousePosition;
        clearTimeout(clickTimer);
        clickTimer = setTimeout(resetClick, 250);
    }

    // If position has not changed
    if (clickCounter && clickPosition.x == mousePosition.x && clickPosition.y == mousePosition.y) {
        clickCounter++;
        if (clickCounter == 2) {
            // Do something on double click
        } else {
            // Do something on triple click
            resetClick();
        }
        conserveClick();
    } else {
        // Do something on single click
        conserveClick();
    }
});

Testé sur Firefox 12, Google Chrome 19, Opera 11.64, Internet Explorer 9

Cette approche vérifie si l'utilisateur n'a pas changé la position du curseur, vous pouvez toujours faire quelque chose lorsque vous cliquez ou double-cliquez. J'espère que cette solution aidera tous ceux qui auront besoin d'implémenter un écouteur d'événements triple clic :)

0
micnic