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