如何在Android和iPhone上使用JavaScript检测长按压力？

问题描述

| 如何在Android和iPhone上使用JavaScript检测长按压力？ 本机javascript或jquery ... 我想要听起来像：

<input type=\'button\' onLongTouch=\'myFunc();\' />

    

解决方法

使用“触摸结束”检测长时间触摸的问题是，如果您希望事件在特定时间段后触发，将无法正常工作。最好在触摸开始时使用计时器，并在触摸结束时清除事件计时器。可以使用以下模式：

var onlongtouch; 
var timer;
var touchduration = 500; //length of time we want the user to touch before we do something

touchstart() {
    timer = setTimeout(onlongtouch,touchduration); 
}

touchend() {

    //stops short touches from firing the event
    if (timer)
        clearTimeout(timer); // clearTimeout,not cleartimeout..
}

onlongtouch = function() { //do something };

    ,这是Joshua答案的扩展版本，因为他的代码可以很好地起作用，直到用户不执行多点触摸为止（您可以用两根手指点击屏幕，并且功能将被触发两次，四指-四次）。 经过一些额外的测试场景后，我什至触发了非常自由地触摸并在每次点击后执行功能的可能性。 我添加了名为\'lockTimer \'的变量，该变量应在用户触发\'touchend \'之前锁定所有其他touchstart。

var onlongtouch; 
var timer,lockTimer;
var touchduration = 800; //length of time we want the user to touch before we do something

function touchstart(e) {
	e.preventDefault();
	if(lockTimer){
		return;
	}
    timer = setTimeout(onlongtouch,touchduration); 
	lockTimer = true;
}

function touchend() {
    //stops short touches from firing the event
    if (timer){
        clearTimeout(timer); // clearTimeout,not cleartimeout..
		lockTimer = false;
	}
}

onlongtouch = function() { 
	document.getElementById(\'ping\').innerText+=\'ping\\n\'; 
};

document.addEventListener(\"DOMContentLoaded\",function(event) { 
  window.addEventListener(\"touchstart\",touchstart,false);
  window.addEventListener(\"touchend\",touchend,false);
});

<div id=\"ping\"></div>

,我已经在我的Android应用中以这种方式完成此操作： 注册的事件侦听器：

var touchStartTimeStamp = 0;
var touchEndTimeStamp   = 0;

window.addEventListener(\'touchstart\',onTouchStart,false);
window.addEventListener(\'touchend\',onTouchEnd,false);

新增功能：

var timer;
function onTouchStart(e) {
    touchStartTimeStamp = e.timeStamp;
}

function onTouchEnd(e) {
    touchEndTimeStamp = e.timeStamp;

    console.log(touchEndTimeStamp - touchStartTimeStamp);// in miliseconds
}

检查时差并做了我的东西 我希望这将有所帮助。     ,对于跨平台开发人员： 在Android上，mouseup / down似乎可以正常工作-但不是所有设备（例如，三星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)
});

    ,我们可以计算开始触摸和结束触摸的时间差。如果计算出的时间差超过了触摸持续时间，则我们使用功能名称taphold。

var touchduration = 300; 
var timerInterval;

function timer(interval) {

    interval--;

    if (interval >= 0) {
        timerInterval = setTimeout(function() {
                            timer(interval);
                        });
    } else {
        taphold();
    }

}

function touchstart() {
    timer(touchduration);
}

function touchend() {
    clearTimeout(timerInterval);
}

function taphold(){
    alert(\"taphold\");
}


document.getElementById(\"xyz\").addEventListener(\'touchstart\',touchstart);
document.getElementById(\"xyz\").addEventListener(\'touchend\',touchend);

    ,就在这里：http://m14i.wordpress.com/2009/10/25/javascript-touch-and-gesture-events-iphone-and-android/ 使用

touchstart

和

touchend

检测给定时间的长时间触摸     ,在所有浏览器中均有效的长按事件

(function (a) {
        function n(b) { a.each(\"touchstart touchmove touchend touchcancel\".split(/ /),function (d,e) { b.addEventListener(e,function () { a(b).trigger(e) },false) }); return a(b) } function j(b) { function d() { a(e).data(h,true); b.type = f; jQuery.event.handle.apply(e,o) } if (!a(this).data(g)) { var e = this,o = arguments; a(this).data(h,false).data(g,setTimeout(d,a(this).data(i) || a.longclick.duration)) } } function k() { a(this).data(g,clearTimeout(a(this).data(g)) || null) } function l(b) {
            if (a(this).data(h)) return b.stopImmediatePropagation() ||
            false
        } var p = a.fn.click; a.fn.click = function (b,d) { if (!d) return p.apply(this,arguments); return a(this).data(i,b || null).bind(f,d) }; a.fn.longclick = function () { var b = [].splice.call(arguments,0),d = b.pop(); b = b.pop(); var e = a(this).data(i,b || null); return d ? e.click(b,d) : e.trigger(f) }; a.longclick = { duration: 500 }; a.event.special.longclick = {
            setup: function () {
                /iphone|ipad|ipod/i.test(navigator.userAgent) ? n(this).bind(q,j).bind([r,s,t].join(\" \"),k).bind(m,l).css({ WebkitUserSelect: \"none\" }) : a(this).bind(u,j).bind([v,w,x,y].join(\" \"),l)
            },teardown: function () { a(this).unbind(c) }
        }; var f = \"longclick\",c = \".\" + f,u = \"mousedown\" + c,m = \"click\" + c,v = \"mousemove\" + c,w = \"mouseup\" + c,x = \"mouseout\" + c,y = \"contextmenu\" + c,q = \"touchstart\" + c,r = \"touchend\" + c,s = \"touchmove\" + c,t = \"touchcancel\" + c,i = \"duration\" + c,g = \"timer\" + c,h = \"fired\" + c
    })(jQuery);

将longclick事件与时间间隔绑定

 $(\'element\').longclick(250,longClickHandler);

触摸设备上的长按会触发以下功能

function longClickHandler() {
    alter(\'Long tap Fired\');
}