我正在使用两个列表之间的FieldLinker Js实现一个draw方法。此功能是根据jQuery中的鼠标事件编写的,并且在桌面浏览器中可以正常工作。 但是触摸事件并未在Ipad设备上触发。
我尝试按照stackoverflow map touch events to mouse answer中的以下链接将鼠标事件与鼠标事件映射,但是 Touchend 事件并未触发。
下面是我的代码:
document.addEventListener("touchstart", this.touchHandler, true);
document.addEventListener("touchmove", this.touchHandler, true);
document.addEventListener("touchend", this.touchHandler, true);
document.addEventListener("touchcancel", this.touchHandler, true);
touchHandler(event) {
var touches = event.changedTouches,
first = touches[0],
type = "";
switch (event.type) {
case "touchstart": type = "mousedown"; break;
case "touchmove": type = "mousemove"; break;
case "touchend": type = "mouseup"; break;
case "touchcancel": type = "mouseup"; break;
default: return;
}
// initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
// event.preventDefault();
}
以及jQuery中的代码
$(this).find(".FL-main .FL-right li").on("mouseup", function (e) {
if (isDisabled) return;
if (move == null) { // no drag
eraseLinkB($(this).data("offset")); // we erase an existing link if any
draw();
} else {
// we finish a drag then get the infos an create a link
eraseLinkB($(this).data("offset")); // we erase an existing link if any
move.offsetB = $(this).data("offset");
move.nameB = $(this).data("name");
/* Added some logic to check the type of both fields and restrict mapping with other data type fields.*/
if (datalistValue[move.offsetA] != countries[move.offsetB]) {
Sa.fire('Cannot map ' + datalistValue[move.offsetA] + ' with ' + countries[move.offsetB]);
eraseLinkA(move.offsetA);
eraseLinkB(move.offsetB);
} else {
var infos = JSON.parse(JSON.stringify(move));
move = null;
makeLink(infos);
console.log('infos', infos);
}
}
});
touchend事件未在更新的代码中触发。 请向我建议我要去哪里错了。预先感谢。