我一直在寻找关于这些事件如何运作的明确指南,现在我比起初时更加困惑。
我网站的某些功能涉及拖放功能。当前移动设备(或任何没有鼠标的东西)通过让用户选择项目,点击“移动”按钮,然后触摸放置点来支持。虽然这很有效(项目在可见网格上),但它并不像拖动那样方便用户。
我最初的理解是,无论我在哪里分配element.onmousedown
,element.onmousemove
和element.onmouseup
,我都可以简单地将相同的处理程序分配给element.ontouchstart
,element.ontouchmove
和分别为element.ontouchend
。
然而,这留下了以下问题:
答案 0 :(得分:7)
其他答案更好地解决了原始问题,但对于后代,像我一样,发现此链接试图使现有的点击/拖动(鼠标)功能在触摸屏上工作,这是一个非常简单的解决方案。
如果你要添加事件监听器,你可以像这样在你的'mousedown'中添加一个相应的'touchstart'行:
document.getElementById('throttle').addEventListener('mousedown', mouseDown, false);
document.getElementById('throttle').addEventListener('touchstart', mouseDown, false);
对任何鼠标移动(touchmove)和mouseup(touchend)执行相同的操作。
在您的函数中,当您获得鼠标坐标时,请使用:
var top = e.clientY || e.targetTouches[0].pageY; //the same syntax for the x value
这样它会检查鼠标点击并先拖动,然后如果未定义,则会查找触摸交互。
就像我说的那样,非常准确,但它确实让我开始。
答案 1 :(得分:1)
您可以通过测量设备宽度/高度来确定坐标(window.innerHeight / window.innerWidth)。
本文是触摸事件和覆盖它们的良好起点: http://www.html5rocks.com/en/mobile/touch/
多点触控手势不应干扰可拖动元素。如果它们在干扰,您可以在事件处理程序中使用条件: (事件处理程序) if(event.touches === 1)处理事件
答案 2 :(得分:0)
以下是有关移动设备和桌面屏幕坐标之间差异的简短摘要:What is the difference between screenX/Y, clientX/Y and pageX/Y?
实现touchmove
事件监听器的一个工作示例:
this.canvas.addEventListener("touchmove", function(e) {
e.preventDefault();
touchPosition(e);
}, false);
var getCanvasPos = function(el) {
var canvas = document.getElementById(el) || this.getCanvas();
var _x = canvas.offsetLeft;
var _y = canvas.offsetTop;
while(canvas = canvas.offsetParent) {
_x += canvas.offsetLeft - canvas.scrollLeft;
_y += canvas.offsetTop - canvas.scrollTop;
}
return {
left : _x,
top : _y
}
};
var touchPosition = function(e) {
var mouseX = e.clientX - this.getCanvasPos(e.target).left + window.pageXOffset;
var mouseY = e.clientY - this.getCanvasPos(e.target).top + window.pageYOffset;
return {
x : mouseX,
y : mouseY
};
};