长期在JavaScript？

Question

是否可以在JavaScript(或jQuery)中实现"长按"？怎么样？

alt text 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

没有'jQuery'魔法,只有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 2

根据Maycow Moura的回答,我写了这个.它还确保用户不会进行右键单击,这会触发长按并在移动设备上运行.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);

您还应该使用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

您可以使用jQuery mobile API的taphold事件.

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

Answer 4

虽然它看起来很简单,可以通过超时和几个鼠标事件处理程序自行实现,但是当您考虑点击 - 拖动 - 释放等情况时,它会变得有点复杂,同时支持按下和长按相同的元素,以及使用iPad等触控设备.我最终使用了longclick jQuery插件(Github),它为我处理这些东西.如果您只需要支持移动电话等触摸屏设备,您也可以尝试jQuery Mobile taphold活动.

Answer 5

我创建了长按事件 (0.5k纯JavaScript)来解决这个问题,它long-press向DOM 添加了一个事件.

侦听long-press上的任何元素:

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

侦听long-press一个在特定的元素:

// 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);
});

适用于IE9 +,Chrome,Firefox,Safari和混合移动应用程序(iOS/Android上的Cordova和Ionic)

演示

Answer 6

jQuery插件.刚刚放$(expression).longClick(function() { <your code here> });.第二个参数是保持时间; 默认超时为500毫秒.

(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 7

对于现代移动浏览器：

document.addEventListener('contextmenu', callback);

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

Answer 8

对于跨平台开发人员（请注意，到目前为止给出的所有答案均不适用于iOS）：

Mouseup / down似乎在android上可以正常工作-但并非所有设备（例如，三星tab4）。在iOS上根本无法使用。

进一步的研究似乎认为这是由于元素具有选择能力以及自然放大率干扰了听众。

如果用户按住该图像500毫秒，则此事件侦听器将以引导方式打开该缩略图。

它使用了响应式图像类，因此显示了较大版本的图像。此代码段已在（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 9

$(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