e.touches[0].pageY returns 未定义

Question

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

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 分支

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';

e.touches[0].pageY returns 未定义

e.touches[0].pageY returns undefined

javascript

mobile

touch