custom - mouse events javascript

Long Presione en JavaScript?

Question

¿Es posible implementar "pulsación larga" en JavaScript (o jQuery)? ¿Cómo?

texto alternativo http://androinica.com/wp-content/uploads/2009/11/longpress_options.png

HTML

<a href="" title="">Long press</a>

JavaScript

$("a").mouseup(function(){
  // Clear timeout
  return false;
}).mousedown(function(){
  // Set timeout
  return false; 
});

Answer 1

¿Me gusta esto?

doc.addEeventListener("touchstart", function(){
    // your code ...
}, false);    

Answer 2

Basado en la respuesta de Maycow Moura, escribí esto. También garantiza que el usuario no haga clic con el botón derecho, lo que provocaría una presión prolongada y funcionaría en dispositivos móviles. DEMO

var node = document.getElementsByTagName("p")[0];
var longpress = false;
var presstimer = null;
var longtarget = null;

var cancel = function(e) {
    if (presstimer !== null) {
        clearTimeout(presstimer);
        presstimer = null;
    }

    this.classList.remove("longpress");
};

var click = function(e) {
    if (presstimer !== null) {
        clearTimeout(presstimer);
        presstimer = null;
    }

    this.classList.remove("longpress");

    if (longpress) {
        return false;
    }

    alert("press");
};

var start = function(e) {
    console.log(e);

    if (e.type === "click" && e.button !== 0) {
        return;
    }

    longpress = false;

    this.classList.add("longpress");

    if (presstimer === null) {
        presstimer = setTimeout(function() {
            alert("long click");
            longpress = true;
        }, 1000);
    }

    return false;
};

node.addEventListener("mousedown", start);
node.addEventListener("touchstart", start);
node.addEventListener("click", click);
node.addEventListener("mouseout", cancel);
node.addEventListener("touchend", cancel);
node.addEventListener("touchleave", cancel);
node.addEventListener("touchcancel", cancel);

También debe incluir algún indicador usando animaciones CSS:

p {
    background: red;
    padding: 100px;
}

.longpress {
    -webkit-animation: 1s longpress;
            animation: 1s longpress;
}

@-webkit-keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

@keyframes longpress {
    0%, 20% { background: red; }
    100% { background: yellow; }
}

Answer 3

El más elegante y limpio es un plugin jQuery: https://github.com/untill/jquery.longclick/ , también disponible como packacke: https://www.npmjs.com/package/jquery.longclick .

En resumen, lo usa así:

$( ''button'').mayTriggerLongClicks().on( ''longClick'', function() { your code here } );

La ventaja de este complemento es que, a diferencia de algunas de las otras respuestas aquí, los eventos de clic aún son posibles. Tenga en cuenta también que se produce un clic prolongado, al igual que un toque largo en un dispositivo, antes del mouseup. Entonces, esa es una característica.

Answer 4

La respuesta de Diodeus es asombrosa, pero te impide agregar una función onClick, nunca ejecutará la función de retención si pones un clic. Y la respuesta de Razzak es casi perfecta, pero se ejecuta la función de mantener solo en mouseup, y en general, la función se ejecuta incluso si el usuario sigue presionando.

Entonces, me uní a ambos, e hice esto:

$(element).on(''click'', function () {
    if(longpress) { // if detect hold, stop onclick function
        return false;
    };
});

$(element).on(''mousedown'', function () {
    longpress = false; //longpress is false initially
    pressTimer = window.setTimeout(function(){
    // your code here

    longpress = true; //if run hold function, longpress is true
    },1000)
});

$(element).on(''mouseup'', function () {
    clearTimeout(pressTimer); //clear time on mouseup
});

Answer 5

No hay magia ''jQuery'', solo cronómetros de JavaScript.

var pressTimer;

$("a").mouseup(function(){
  clearTimeout(pressTimer);
  // Clear timeout
  return false;
}).mousedown(function(){
  // Set timeout
  pressTimer = window.setTimeout(function() { ... Your Code ...},1000);
  return false; 
});

Answer 6

Para desarrolladores multiplataforma (Nota Todas las respuestas dadas hasta ahora no funcionarán en iOS) :

Mouseup / Down parecía funcionar bien en Android , pero no en todos los dispositivos, es decir (Samsung tab4). No funcionó en absoluto en iOS .

Más investigación parece que esto se debe a que el elemento tiene selección y la ampliación nativa interrumpe al oyente.

Este detector de eventos permite abrir una imagen en miniatura en un modo de arranque, si el usuario retiene la imagen durante 500 ms.

Utiliza una clase de imagen sensible que muestra una versión más grande de la imagen. Esta pieza de código ha sido completamente probada (iPad / Tab4 / TabA / Galaxy4):

var pressTimer;  
$(".thumbnail").on(''touchend'', function (e) {
   clearTimeout(pressTimer);
}).on(''touchstart'', function (e) {
   var target = $(e.currentTarget);
   var imagePath = target.find(''img'').attr(''src'');
   var title = target.find(''.myCaption:visible'').first().text();
   $(''#dds-modal-title'').text(title);
   $(''#dds-modal-img'').attr(''src'', imagePath);
   // Set timeout
   pressTimer = window.setTimeout(function () {
      $(''#dds-modal'').modal(''show'');
   }, 500)
});

Answer 7

Para mí, es trabajar con ese código (con jQuery):

var int       = null,
    fired     = false;

var longclickFilm = function($t) {
        $body.css(''background'', ''red'');
    },
    clickFilm = function($t) {
        $t  = $t.clone(false, false);
        var $to = $(''footer > div:first'');
        $to.find(''.empty'').remove();
        $t.appendTo($to);
    },
    touchStartFilm = function(event) {
        event.preventDefault();
        fired     = false;
        int       = setTimeout(function($t) {
            longclickFilm($t);
            fired = true;
        }, 2000, $(this)); // 2 sec for long click ?
        return false;
    },
    touchEndFilm = function(event) {
        event.preventDefault();
        clearTimeout(int);
        if (fired) return false;
        else  clickFilm($(this));
        return false;
    };

$(''ul#thelist .thumbBox'')
    .live(''mousedown touchstart'', touchStartFilm)
    .live(''mouseup touchend touchcancel'', touchEndFilm);

Answer 8

Para navegadores modernos y móviles:

document.addEventListener(''contextmenu'', callback);

https://developer.mozilla.org/en-US/docs/Web/Events/contextmenu

Answer 9

Puede establecer el tiempo de espera para ese elemento con el mouse hacia abajo y borrarlo con el mouse hacia arriba:

$("a").mousedown(function() {
    // set timeout for this element
    var timeout = window.setTimeout(function() { /* … */ }, 1234);
    $(this).mouseup(function() {
        // clear timeout for this element
        window.clearTimeout(timeout);
        // reset mouse up event handler
        $(this).unbind("mouseup");
        return false;
    });
    return false;
});

Con esto, cada elemento obtiene su propio tiempo de espera.

Answer 10

Puede usar el evento taphold de la API móvil de jQuery.

jQuery("a").on("taphold", function( event ) { ... } )

Answer 11

Puedes usar el taphold de jquery-mobile. Incluya el jquery-mobile.js y el siguiente código funcionará bien

$(document).on("pagecreate","#pagename",function(){
  $("p").on("taphold",function(){
   $(this).hide(); //your code
  });    
});

Answer 12

Si bien parece bastante simple de implementar por su cuenta con un tiempo de espera y un par de controladores de eventos de mouse, se vuelve un poco más complicado cuando se consideran casos como hacer clic y arrastrar-soltar, admitir tanto la prensa como presionar durante mucho tiempo en el mismo elemento y trabajando con dispositivos táctiles como el iPad. Terminé usando el complemento longclick jQuery ( Github ), que se ocupa de esas cosas para mí. Si solo necesita admitir dispositivos de pantalla táctil como teléfonos móviles, también puede probar el evento de taphold de jQuery Mobile .

Answer 13

Use long-press , el script 1.2k que usa CustomEvent para agregar un evento de long-press al DOM.

Escuche si long-press sobre cualquier elemento:

// the event bubbles, so you can listen at the root level
document.addEventListener(''long-press'', function(e) {
  console.log(e.target);
});

Escuche para una long-press en un elemento específico :

// get the element
var el = document.getElementById(''idOfElement'');

// add a long-press event listener
el.addEventListener(''long-press'', function(e) {

    // stop the event from bubbling up
    e.preventDefault()

    console.log(e.target);
});

Funciona en IE9 +, Chrome, Firefox, Safari, incluidas aplicaciones móviles híbridas Cordova y Ionic

Demo

Answer 14

plugin jQuery. Simplemente ponga $(expression).longClick(function() { <your code here> }); . El segundo parámetro es duración de espera; el tiempo de espera predeterminado es 500 ms.

(function($) {
    $.fn.longClick = function(callback, timeout) {
        var timer;
        timeout = timeout || 500;
        $(this).mousedown(function() {
            timer = setTimeout(function() { callback(); }, timeout);
            return false;
        });
        $(document).mouseup(function() {
            clearTimeout(timer);
            return false;
        });
    };

})(jQuery);

Answer 15

Puede verificar la hora para identificar Click o Long Press [jQuery]

function AddButtonEventListener() {
try {
    var mousedowntime;
    var presstime;
    $("button[id$=''" + buttonID + "'']").mousedown(function() {
        var d = new Date();
        mousedowntime = d.getTime();
    });
    $("button[id$=''" + buttonID + "'']").mouseup(function() {
        var d = new Date();
        presstime = d.getTime() - mousedowntime;
        if (presstime > 999/*You can decide the time*/) {
            //Do_Action_Long_Press_Event();
        }
        else {
            //Do_Action_Click_Event();
        }
    });
}
catch (err) {
    alert(err.message);
}
} 

Answer 16

$(document).ready(function () {
    var longpress = false;

    $("button").on(''click'', function () {
        (longpress) ? alert("Long Press") : alert("Short Press");
    });

    var startTime, endTime;
    $("button").on(''mousedown'', function () {
        startTime = new Date().getTime();
    });

    $("button").on(''mouseup'', function () {
        endTime = new Date().getTime();
        longpress = (endTime - startTime < 500) ? false : true;
    });
});

DEMO