Answers:
核心jQuery的触摸事件没有什么特别的,但是您可以使用以下事件轻松构建自己的事件
例如, touchmove
document.addEventListener('touchmove', function(e) {
e.preventDefault();
var touch = e.touches[0];
alert(touch.pageX + " - " + touch.pageY);
}, false);
这适用于大多数基于WebKit的浏览器(包括Android)。
如果您使用的是jQuery 1.7+,则比所有其他答案还要简单。
$('#whatever').on({ 'touchstart' : function(){ /* do something... */ } });
$('#whatever').on('touchstart click', function(){ /* do something... */ });
$('#whatever').on({ 'touchstart' : function(ev){}});
,ev
似乎没有任何有关触摸的信息(touches,targetTouches或changedTouches)
ev.originalEvent
。
最简单的方法是使用类似Hammer.js的多点触控JavaScript库。然后,您可以编写如下代码:
canvas
.hammer({prevent_default: true})
.bind('doubletap', function(e) { // And double click
// Zoom-in
})
.bind('dragstart', function(e) { // And mousedown
// Get ready to drag
})
.bind('drag', function(e) { // And mousemove when mousedown
// Pan the image
})
.bind('dragend', function(e) { // And mouseup
// Finish the drag
});
而且您可以继续前进。它支持轻按,双击,轻扫,按住,变换(即捏)和拖动。当发生等效的鼠标操作时,触摸事件也会触发,因此您无需编写两组事件处理程序。哦,如果您希望能够像我一样以jQueryish方式编写,则需要jQuery插件。
单独使用touchstart或touchend并不是一个好的解决方案,因为如果滚动页面,设备也会将其检测为触摸或点击。因此,同时检测点击事件的最佳方法是仅检测不会移动屏幕(滚动)的触摸事件。因此,只需将以下代码添加到您的应用程序即可:
$(document).on('touchstart', function() {
detectTap = true; // Detects all touch events
});
$(document).on('touchmove', function() {
detectTap = false; // Excludes the scroll events from touch events
});
$(document).on('click touchend', function(event) {
if (event.type == "click") detectTap = true; // Detects click events
if (detectTap){
// Here you can write the function or codes you want to execute on tap
}
});
我测试了它,它在iPad和iPhone上都能正常工作。它检测点击,并可以轻松区分点击和触摸滚动。
jQuery Core没有什么特别的,但是您可以在jQuery Mobile Events页面上阅读有关不同触摸事件的信息,这些事件也可以在iOS设备以外的其他设备上使用。
他们是:
还要注意,在滚动事件期间(基于移动设备上的触摸),iOS设备在滚动时会冻结DOM操作。
我有点担心只为我的项目使用touchmove,因为它似乎仅在您的触摸从一个位置移动到另一位置(而不是在初始触摸上)时触发。因此,我将其与touchstart结合使用,这对于初始触摸和任何移动似乎都非常有效。
<script>
function doTouch(e) {
e.preventDefault();
var touch = e.touches[0];
document.getElementById("xtext").innerHTML = touch.pageX;
document.getElementById("ytext").innerHTML = touch.pageY;
}
document.addEventListener('touchstart', function(e) {doTouch(e);}, false);
document.addEventListener('touchmove', function(e) {doTouch(e);}, false);
</script>
X: <div id="xtext">0</div>
Y: <div id="ytext">0</div>
document.getElementById("ttime").innerHTML = ((new Date()) - touchTime); touchTime = new Date();
我刚刚针对1.4和1.7+版本的jQuery 测试了Benmajor的GitHub jQuery Touch Events插件。它是轻量级的,可以完美地与两者结合使用on
,bind
同时还为一系列详尽的触摸事件提供支持。