Quiero ser capaz de disparar un evento cuando un usuario hace clic en un botón, luego mantiene presionado ese botón durante 1000 a 1500 ms.¿Cómo puedo escuchar un clic y mantener presionado en jQuery?
¿Existe la funcionalidad básica de jQuery o un complemento que ya lo habilite?
¿Debo hacer mi propio? ¿Donde debería empezar?
var timeoutId = 0;
$('#myElement').on('mousedown', function() {
timeoutId = setTimeout(myFunction, 1000);
}).on('mouseup mouseleave', function() {
clearTimeout(timeoutId);
});
Editar: corrección por AndyE ... gracias!
Editar 2: usando unen ahora para dos eventos con mismo manejador por gnarf
Es de suponer que se podría poner en marcha una llamada setTimeout en mousedown, y luego cancelarlo en mouseup (si mouseup sucede antes de que finalice el tiempo de espera) .
Sin embargo, parece que hay un complemento: longclick.
El enlace está muerto. –
Aquí es 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);
});
}
Aircoded (pero probado en this fiddle)
(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);
})
cómo seleccionar el texto con un color diferente cuando toque y mantenga presionado en el dispositivo – Lucky
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);
Hice un simple plugin de jQuery para esto si alguien está interesado.
Niza. Pudo modificar esto para detectar que un objeto ha sido arrastrado para eliminar un mensaje que le dice al usuario que arrastre el objeto. – Starfs
escribí algo de código para hacer 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">Ahora es necesario sólo para ajustar la hora de mantener y añadir clickHold caso de su elemento
posible duplicado de [Pulsación larga en JavaScript?] (Http://stackoverflow.com/questions/2625210/long-press-in-javascript) –
¿Qué tal 'taphold'? – Roshdy