Tengo una clase div "adivinada" y tengo un temporizador para detectar si una pulsación corta y una pulsación larga. Al realizar la prueba, la consola registra "MOUSEDOWN" después de presionar en lugar de presionar.
La consola también registra "PRESIÓN CORTA" incluso si se mantiene presionada durante más de 2 segundos.
Probé el código en JSFiddle y funciona bien. Sin embargo, dentro de mi sitio web, el código no funciona. ¿Alguien puede detectar el error? Muchas gracias
var timer = 0; var timerInterval; $(document).on('mousedown', '.guessed', function() { console.log("MOUSEDOWN"); timerInterval = setInterval(function() { timer += 1; }, 300); }); $(document).on('mouseup', '.guessed', function() { if (timer < 1) { console.log("SHORT PRESS"); clearInterval(timerInterval); timer = 0; return; } console.log("LONG PRESS"); clearInterval(timerInterval); timer = 0; }); .guessed { border:1px solid red; width:100px; height:100px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='guessed'>mouse me</div>Simplemente puede usar atributos html para eventos mouseup y mousedown y llamar funciones de JavaScript definidas personalizadas como en el siguiente ejemplo:
var timer = 0,timerInterval; function mousedownfunction() { console.log("MOUSE DOWN"); timerInterval = setInterval(function() { timer += 1; }, 300); } function mouseupfunction() { console.log("MOUSE UP"); if (timer < 1) { console.log("SHORT PRESS"); clearInterval(timerInterval); timer = 0; return; } else { console.log("LONG PRESS"); clearInterval(timerInterval); timer = 0; return; } } <div class="guessed" onmousedown="mousedownfunction()" onmouseup="mouseupfunction()"> <p>Mouse</p> </div>