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

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

我有一个图像,我想有一个 onlick 事件。我也不希望任何人拖动 / 选择或打开上下文菜单。现在我发现在触摸屏上 50% 的时间人们点击一些图像会发生什么,当他们按下图像时他们的手指移动。所以在 mousedown 和 mouseup 事件之间有一个微小的区别。但是当他们这样做时,点击事件不会被触发 (至少在 chrome 中)。

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

点击图像将显示一个警报和鼠标上下事件,但是当你点击并使用鼠标移动超过 3 个像素左右时,点击和鼠标向上事件不会被触发。它还显示,如果你点击,然后将鼠标移动 1 个像素,mousedown 事件和 onclick 事件被触发,但不是 mouseup 事件。这是一个错误还是我在这里缺少一些东西?

1

这看起来像一个 chrome bug。

发生这种情况是因为您正在阻止拖动事件,该事件不应链接到单击事件。

解决方法:

您可以通过在 chrome 中设置draggable="false"属性来防止拖动,但 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" 
 />

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(256)
百度小程序seo:百度地图如何生成 APIKey
上一篇
注销办学许可证程序:程序化许可证解析(resolvement)
下一篇

相关推荐

  • spi verilog代码:SPI Verilog代码实现的硬件接口设计

    SPI Verilog代码是一种用来控制和传输数据的串行通信协议,它可以帮助多个设备之间进行高速数据传输。Verilog代码可以用来实现SPI接口,它可以控制SPI总线中的多个设备,并实现数据的发送和接收。下面是一段SPI Verilog代码:…

    2023-08-26 16:14:21
    0 54 27
  • lifestart.syaro网页版Lifestart.syaro网页版

    lifestart.syaro是一个基于Web的轻量级社交网络服务,它提供了一种方便快捷的方式来分享、交流和发布内容。它的核心功能包括:…

    2023-09-16 14:53:15
    0 93 17
  • 怎么让qq皮肤透明:你怎么让剑攻击(how to make sword)

    关于怎么让qq皮肤透明的问题,在how to make sword中经常遇到,你们是怎么进行剑攻的?我问这个问题是因为我不知道如何进行剑攻,而我正在观看的tutorial只显示了射弹攻击。我想学习如何为我正在创建的游戏进行剑攻。这是我正在显示的代码…

    2023-11-09 03:19:53
    0 29 88
  • 起重机计算实例:服务器挂起重新启动(pending reboot registry)

    关于起重机计算实例的问题,在pending reboot registry中经常遇到,我正在尝试修改我的 PowerShell 脚本,以找到检查我们服务器上的 Pending Reboots 的最佳可能方法。此脚本检查注册表项。但是,我看到其他 PowerShell 脚本的不一致,并希望获得有关最佳方法的指导。…

    2024-02-10 01:17:37
    0 60 60
  • Johnny j:使用 Johnny-five和arduino读取输入引脚

    关于Johnny j的问题,在johnny 5 input中经常遇到,我正在使用 node.js 和 arduino 的应用程序。…

    2024-02-05 11:01:30
    0 52 51
  • 注销办学许可证程序:程序化许可证解析(resolvement)

    关于注销办学许可证程序的问题,在resolvement中经常遇到,是否有可能通过artifactId:groupId:version区分工件的许可证,例如通过 REST API 访问 Maven 存储库?…

    2024-02-09 11:12:11
    0 18 11

发表评论

登录 后才能评论

评论列表(46条)