javascript - tipos - ¿Cómo puedo escuchar un clic y mantener presionado en jQuery?

tipos de click jquery

Question

Quiero poder activar un evento cuando un usuario hace clic en un botón, y luego mantiene presionado ese botón durante 1000 a 1500 ms.

¿Hay una funcionalidad básica jQuery o un complemento que ya lo habilite?

¿Debería lanzar el mío? ¿Donde debería empezar?

Answer 1

Aircoded (pero probado en este violín )

(function($) {
function startTrigger(e) {
var $elem = $(this);
$elem.data(''mouseheld_timeout'', setTimeout(function() {
$elem.trigger(''mouseheld'');
}, e.data));
}
function stopTrigger() {
var $elem = $(this);
clearTimeout($elem.data(''mouseheld_timeout''));
}
var mouseheld = $.event.special.mouseheld = {
setup: function(data) {
// the first binding of a mouseheld event on an element will trigger this
// lets bind our event handlers
var $this = $(this);
$this.bind(''mousedown'', +data || mouseheld.time, startTrigger);
$this.bind(''mouseleave mouseup'', stopTrigger);
},
teardown: function() {
var $this = $(this);
$this.unbind(''mousedown'', startTrigger);
$this.unbind(''mouseleave mouseup'', stopTrigger);
},
time: 750 // default to 750ms
};
})(jQuery);
// usage
$("div").bind(''mouseheld'', function(e) {
console.log(''Held'', e);
})

Answer 2

Aquí está mi implementación actual:

$.liveClickHold = function(selector, fn) {
$(selector).live("mousedown", function(evt) {
var $this = $(this).data("mousedown", true);
setTimeout(function() {
if ($this.data("mousedown") === true) {
fn(evt);
}
}, 500);
});
$(selector).live("mouseup", function(evt) {
$(this).data("mousedown", false);
});
}

Answer 3

Escribí un código para hacerlo más fácil

//Add custom event listener
$('':root'').on(''mousedown'', ''*'', function() {
var el = $(this),
events = $._data(this, ''events'');
if (events && events.clickHold) {
el.data(
''clickHoldTimer'',
setTimeout(
function() {
el.trigger(''clickHold'')
},
el.data(''clickHoldTimeout'')
)
);
}
}).on(''mouseup mouseleave mousemove'', ''*'', function() {
clearTimeout($(this).data(''clickHoldTimer''));
});
//Attach it to the element
$(''#HoldListener'').data(''clickHoldTimeout'', 2000); //Time to hold
$(''#HoldListener'').on(''clickHold'', function() {
console.log(''Worked!'');
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<img src="http://lorempixel.com/400/200/" id="HoldListener">

Ver en JSFiddle

Ahora solo necesita establecer el tiempo de espera y agregar el evento clickHold en su elemento

Answer 4

Hice un plugin JQuery simple para esto si alguien está interesado.

http://plugins.jquery.com/pressAndHold/

Answer 5

Presumiblemente, podría iniciar una llamada a mousedown en mousedown y luego cancelarla en mouseup (si ocurre mouseup antes de que se mouseup el tiempo de espera).

Sin embargo, parece que hay un complemento: longclick .

Answer 6

 var _timeoutId = 0;
var _startHoldEvent = function(e) {
_timeoutId = setInterval(function() {
myFunction.call(e.target);
}, 1000);
};
var _stopHoldEvent = function() {
clearInterval(_timeoutId );
};
$(''#myElement'').on(''mousedown'', _startHoldEvent).on(''mouseup mouseleave'', _stopHoldEvent);

Answer 7

var timeoutId = 0;
$(''#myElement'').on(''mousedown'', function() {
timeoutId = setTimeout(myFunction, 1000);
}).on(''mouseup mouseleave'', function() {
clearTimeout(timeoutId);
});

Edición : corrección por AndyE ... ¡gracias!

Editar 2 : usando bind ahora para dos eventos con el mismo controlador por gnarf