尝试将此“驱动程序”插入您的页面代码,并让我们知道它是否有效。. . 它似乎在我的网站上工作,它有同样的问题:
//Mouse & Touch -> Consistent Click / Mouse Commands -> Useful driver
(function() {
var isTouch = false;
var simulated_flag = 'handler_simulated';
var touch_click_array = {};
const clickMoveThreshold = 20; //Pixels
function mouseHandler(event) {
if (isTouch) {
if (!event.hasOwnProperty(simulated_flag)) {
//Unreliable mouse commands - In my opinion
var fixed = new jQuery.Event(event);
fixed.preventDefault();
fixed.stopPropagation();
}
}
else {
//Mouse commands are consistent
//TODO: generate corresponding touches
}
}
function mouseFromTouch(type, touch) {
var event = document.createEvent("MouseEvent");
event.initMouseEvent(type, true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY
, false, false, false, false, 0, null);
event[simulated_flag] = true;
touch.target.dispatchEvent(event);
};
function touchHandler(event) {
var touches = event.changedTouches
,first = touches[0]
,type = ""
;
if (!event.hasOwnProperty(simulated_flag)) {
isTouch = true;
//Simulate mouse commands
switch (event.type) {
case "touchstart":
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
touch_click_array[touch.identifier] = { x: touch.screenX, y: touch.screenY };
}
mouseFromTouch("mousedown", first);
break;
case "touchmove":
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
var id = touch.identifier;
var data = touch_click_array[id];
if (data !== undefined) {
if (Math.abs(data.x - touch.screenX) + Math.abs(data.y - touch.screenY) > clickMoveThreshold) {
delete touch_click_array[id];
}
}
}
mouseFromTouch("mousemove", first);
break;
case "touchcancel":
//Not sure what should happen here . . .
break;
case "touchend":
mouseFromTouch("mouseup", first);
for (var i = 0; i < touches.length; i++) {
var touch = touches[i];
if (touch_click_array.hasOwnProperty(touch.identifier)) {
mouseFromTouch("click", touch);
delete touch_click_array[touch.identifier];
}
}
break;
}
}
}
document.addEventListener("mousedown", mouseHandler, true);
document.addEventListener("mousemove", mouseHandler, true);
document.addEventListener("mouseup", mouseHandler, true);
document.addEventListener("click", mouseHandler, true);
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
})();
现在它不是一个 100% 完整的脚本 - 多点触控可能有点不稳定,如果您根据触控命令构建界面,它不会在此版本中生成这些。但是,它解决了我的链接点击问题。
Erm - ps - 它使用 jQuery。如果您需要非 jQuery 版本,您可能只需new jQuery.Event
从mouseHandler()
函数中删除 (换句话说,使用原始事件:)var fixed = event;
,我相信大多数浏览器都可以。不过,我并不完全是 js 兼容性专家。
PPS - 使用 Android 1.6 测试
PPPS - 必须修改脚本以允许阈值 - 实际设备在按下期间触发移动事件时遇到了一些问题。可能不理想;如果有人想以更好的方式来做这件事,我很想听听……