Question

我遇到过这个问题，我在图像上有一个onclick事件，但当鼠标在mousedown和mouseup事件之间移动时，它不会被触发。

我有一张图片，我希望有一个onlick事件。我也不希望任何人拖动/选择或打开上下文菜单。现在我发现在触摸屏上50％的时间人们点击某些图像会发生什么，当他们按下图像时他们的手指会移动。因此，在mousedown和mouseup事件之间存在微小的差异。但是当他们这样做时，不会触发click事件（至少在chrome中）。此外，onmouseup-event也没有被触发。

看看这个：https://fiddle.jshell.net/08pbjfq2/1/

单击图像将显示警报和鼠标上下事件，但是当您单击并使用鼠标移动超过3个像素时，不会触发单击和鼠标按下事件。此外，如果您单击然后将鼠标移动1个像素，则mousedown事件和onclick事件将被触发，但不会触发mouseup事件。这是一个错误还是我错过了什么？

Answer 1

这看起来像是一个铬虫。

这是因为您正在阻止不应该与click事件相关联的drag-event。

解决方法：

您可以通过在chrome中设置draggable="false"属性来阻止拖动，但FF不支持它。所以为了支持FF，你仍然需要阻止这个事件。

var img1 = document.images[0];
img1.ondragstart = e => e.preventDefault();
img1.onclick = e =>  console.log('clicked first');

// to show that this is the problem in chrome :
var img2 = document.images[1];
img2.ondragstart = e => e.preventDefault();
img2.onclick = e =>  console.log('clicked second');

/* CSS can prevent selection */
img{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }

<img draggable="false" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTS0G-xT5r9xjdGAHlvZk2wdZVhyP6LOpOJE7PyNLXdUCs0pG-gqA" 
 />
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTS0G-xT5r9xjdGAHlvZk2wdZVhyP6LOpOJE7PyNLXdUCs0pG-gqA" 
 />

在图像上移动鼠标时单击事件不触发

1 个答案:

这看起来像是一个铬虫。

解决方法：