e.touches[0].pageY returns undefined

Question

我正试图在移动设备上处理一个可拖动元素的触摸事件。我有一个事件监听器，可以判断用户是在移动设备上还是在桌面上。如果用户在移动设备上，则变量isTouched=True，否则为False。如果为true，则运行具有e.target.style.top = (e.touches[0].pageY - (e.target.offsetHeight /2 )) + 'px';的else块，这就是问题所在。(e.touches[0].pageY或(e.touches[0].pageX都返回undefined。我得到的确切错误代码是这样的。

Uncaught TypeError: Cannot read property '0' of undefined
at HTMLDivElement.handleMouseDown

这是我项目的代码。

function handleMouseDown(e) {
if (e.target.classList.contains("draggable")){
document.getElementById("wrapper").append(draggedWord);
e.target.style.position = "absolute";
if (isTouched == false) {
e.target.style.top = (e.pageY - (e.target.offsetHeight /2 )) + 'px';
e.target.style.left = (e.pageX - (e.target.offsetWidth / 2)) + 'px';
} else {
e.target.style.top = (e.touches[0].pageY - (e.target.offsetHeight /2 )) + 'px';
e.target.style.left = (e.touches[0].pageX - (e.target.offsetWidth / 2)) + 'px';

}

}
}

设置isTouched变量的EventListener就在这里。

window.addEventListener("DOMContentLoaded", function () {
window.addEventListener('touchstart', function () {
isTouched = true;
});
window.addEventListener('mousedown', function () {
isTouched = false;
});

我用这些eventListeners调用上面的函数

document.getElementById("wrapper").addEventListener("mousedown",handleMouseDown);
document.getElementById("wrapper").addEventListener("touchstart",handleMouseDown);  

Answer 1

我解决了这个问题！我只需要在其他分支中添加一个preventDefault()

else {
e.preventDefault();
e.target.style.top = (e.touches[0].pageY - (e.target.offsetHeight /2 )) + 'px';
e.target.style.left = (e.touches[0].pageX - (e.target.offsetWidth / 2)) + 'px';