Question

我正在尝试添加鼠标并触摸down和move事件。在events函数中，我希望获得clientX金额。我做了以下事情来获得它：

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

但是我收到以下错误：

未捕获的TypeError：无法读取未定义的属性“0”

当：

鼠标悬停在橙色框上。
鼠标点击window。
我触摸window。（虽然我也得到了正确的输出。所以看起来它的功能是两次。）

如何添加触摸和鼠标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未定义，因此您收到错误。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

鼠标和触摸事件无法按预期工作

JSFiddle

1 个答案: