如何用Android和iphone的javascript检测长触摸压力?

如何用Android和iphone的javascript检测长触摸压力? 原生javascript或jquery …

我想要的东西听起来像:

 

Solutions Collecting From Web of "如何用Android和iphone的javascript检测长触摸压力?"

使用Touch End检测长触摸的问题是,如果您希望事件在一段时间后触发,它将无法工作。 最好在触摸开始时使用计时器并清除触摸结束时的事件计时器。 可以使用以下模式:

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

这是约书亚答案的扩展版本,因为他的代码很好用,直到用户不执行多点触控(你可以用两个手指点击屏幕,function将被触发两次,4个手指 – 4次)。 在一些额外的测试场景之后,我甚至触发了非常自由地触摸的可能性并且在每次点击之后接收function执行。

我添加了一个名为’lockTimer’的variables,它应该在用户触发’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); }); 
 

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

使用touchstarttouchend来检测一段时间的长时间触摸

我们可以计算触摸开始时和触摸结束时的时差。 如果计算出的时差超过触摸持续时间,那么我们使用函数名称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); 

对于跨平台开发人员:

Mouseup / down似乎在android上运行正常 – 但不是所有设备即(三星tab4)。 在iOS上根本没用

进一步研究它似乎是由于元素具有选择和原生放大率使听众中断。

如果用户将图像保持500ms,则此事件侦听器可以在引导模式中打开缩略图图像。

它使用响应式图像类,因此显示更大版本的图像。 这段代码已经过全面测试(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) }); 

我在Android应用中这样做了:

  1. 注册事件听众:

     var touchStartTimeStamp = 0; var touchEndTimeStamp = 0; window.addEventListener('touchstart', onTouchStart,false); window.addEventListener('touchend', onTouchEnd,false); 
  2. 增加function:

     var timer; function onTouchStart(e) { touchStartTimeStamp = e.timeStamp; } function onTouchEnd(e) { touchEndTimeStamp = e.timeStamp; console.log(touchEndTimeStamp - touchStartTimeStamp);// in miliseconds } 
  3. 检查时差并做了我的东西

我希望这将有所帮助。

在所有浏览器中工作的长按事件

 (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(" "), k).bind(m, 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触发

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

“长触摸压力”被称为“按压”,它在Hammer.js中实现http://hammerjs.github.io/尝试他们的演示。

我试过了,这很难做到。 我还没有愿意为我的应用程序采用一个大的移动框架,但如果你对它好, Sencha Touch应该支持webkit设备上的这个和其他触摸事件。

在我使用touchstart的测试中,我无法阻止移动浏览器popup对话框而不是触发我的事件。