javascript - 鼠标和触摸事件未按预期工作

Question

我正在尝试添加鼠标和触摸向下和移动事件。在事件函数中，我想获取 clientX 金额。我做了以下操作来获取它:

console.log(e.touches[0].clientX || e.clientX);

但我收到以下错误:

Uncaught TypeError: Cannot read property '0' of undefined

时间:

• 鼠标悬停在橙色框上。
• 鼠标点击窗口。
• 我触摸窗口。 (不过，我也得到了正确的输出。所以看起来该函数触发了两次。)

如何添加触摸和鼠标 down 和 move 事件，然后获取 clientX？我必须添加触摸和移动事件，因为在触摸屏笔记本电脑上，同时具有这两种功能。 (我使用的是 Chrome。)

JSFiddle

var myDiv = document.getElementById('myDiv');
window.addEventListener('mousedown', mouseDownFunction);
window.addEventListener('touchstart', mouseDownFunction);

myDiv.addEventListener('mousemove', mouseMoveFunction);
myDiv.addEventListener('touchmove', mouseMoveFunction);

function mouseDownFunction(e) {
  console.log(e.touches[0].clientX || e.clientX);
}

function mouseMoveFunction(e) {
  myDiv.innerHTML = e.touches[0].clientX || e.clientX;
}

#myDiv {
  width: 100px;
  height: 100px;
  background-color: orange;
}

<div id="myDiv"></div>

Answer 1

给你:

将表达式设为 (e.touches && e.touches[0].clientX) || e.clientX

e.touches 未定义，因此您收到错误。

var myDiv = document.getElementById('myDiv');
window.addEventListener('mousedown', mouseDownFunction);
window.addEventListener('touchstart', mouseDownFunction);

myDiv.addEventListener('mousemove', mouseMoveFunction);
myDiv.addEventListener('touchmove', mouseMoveFunction);

function mouseDownFunction(e) {
  console.log((e.touches && e.touches[0].clientX) || e.clientX);
}

function mouseMoveFunction(e) {
  myDiv.innerHTML = (e.touches && e.touches[0].clientX) || e.clientX;
}

#myDiv {
  width: 100px;
  height: 100px;
  background-color: orange;
}

<div id="myDiv"></div>