我做了一个轮播，我的dragevent在电脑上工作正常，但在手机上不能。
我看到有人建议使用touchEvent，但touchEvent也不起作用。
const $img = document.querySelector('img');
$img.addEventListener('dragstart', function(e){ console.log(`Start: ${e.screenX}`) },false);
$img.addEventListener('dragend', function(e){ console.log(`End: ${e.screenX}`) },false)
如果我使用 TouchStart 或 TouchEnd 执行相同的请求，则不会对事件产生任何价值
/* event does not fire */
$img.addEventListener('touchstart', function(e){ console.log(`Evento: ${e.screenX}`) }, false)
在移动设备上，您可以使用：
- 触摸启动
- 触摸移动
- 触端
- 触摸取消
<html>
<body>
<p id="test">Drag Me!</p>
<script>
const p = document.getElementById("test");
p.addEventListener("dragstart", handleStuff, false);
p.addEventListener("touchstart", touch2drag, false);
function handleStuff(e) {
e.stopPropagation();
e.preventDefault();
if (e.clientX) {
console.log(`Stuff happened at ${e.clientX}x;${e.clientY}.`);
}
}
function touch2drag(e) {
e.stopPropagation();
e.preventDefault();
// translate to mouse event
let clkEvt = document.createEvent("MouseEvent");
clkEvt.initMouseEvent(e.type.replace("touch", "drag"), true, true, window, e.detail,
e.touches[0].screenX, e.touches[0].screenY,
e.touches[0].clientX, e.touches[0].clientY,
false, false, false, false,
0, null);
p.dispatchEvent(clkEvt);
// or just handle touch event
handleStuff(e);
}
</script>
</body>
</html>