首页 web前端 js教程 jQuery中如何完美解决Chrome下的mousemove事件bug?

jQuery中如何完美解决Chrome下的mousemove事件bug?

Jun 28, 2017 am 10:41 AM
chrome jquery 解决

在Chrome下有一个关于mousemove的bug是:
1.在触发mouseup事件时,包括在触发click和contextmenu时,也会触发mousemove事件;
2.更诡异的是,当你连续的触发contextmenu事件时,mousedown事件会被mousemove代替,
目前我想到的一个解决方案,通过时间戳比较:

var body = document.querySelector("h1");
var timeStamp;

body.addEventListener("mousedown", function (e) {
    console.log("mouse down");
}, false);

body.addEventListener("mouseup", function (e) {
    console.log("mouse up");
    timeStamp = e.timeStamp;
})

body.addEventListener("mousemove", function (e) {
    if (!timeStamp || ( e.timeStamp - timeStamp > 10)) {
        console.log("mouse move");    
    }
})
登录后复制

这样能避免在触发click事件,或者触发鼠标左键mouseup引起的mousemove,但是对于上面描述的contextmenu引起的mousemove还是不能很好解决

请问有什么完美的解决办法吗?还是只能尽可能避免这种情况

<input type="text" id="a1" />

$("#a1").mousemove(function(){
	if ($(this).data("x") === event.pageX && $(this).data("y") === event.pageY) {
		return false;
	}
	$(this).data({"x":event.pageX, "y":event.pageY});
	$(this).after("1");
})
登录后复制

用jq是为了在所有浏览器下用.data()。思路就是这么个思路,你自己去改吧。

还有,一个元素绑定mousemove之后就别再绑定别的事件。

最后:尽量别用mousemove,太费资源。

可以通过比较mousedown的位置来确认是否是move操作

document.onmousemove = function(e) {  
// 不是move操作  if (x === mouseDown.x && y === mouseDown.y) {
        return false;
    }};
document.onmousedown = function (e) {  
mouseDown = { x: e.clientX, y: e.clientY };};
登录后复制


以上是jQuery中如何完美解决Chrome下的mousemove事件bug?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Win11系统无法安装中文语言包的解决方法 Win11系统无法安装中文语言包的解决方法 Mar 09, 2024 am 09:48 AM

Win11系统无法安装中文语言包的解决方法随着Windows11系统的推出,许多用户开始升级他们的操作系统以体验新的功能和界面。然而,一些用户在升级后发现他们无法安装中文语言包,这给他们的使用体验带来了困扰。在本文中,我们将探讨Win11系统无法安装中文语言包的原因,并提供一些解决方法,帮助用户解决这一问题。原因分析首先,让我们来分析一下Win11系统无法

什么是Updater.exe在Windows 11/10中?这是Chrome进程吗? 什么是Updater.exe在Windows 11/10中?这是Chrome进程吗? Mar 21, 2024 pm 05:36 PM

你在Windows上运行的每个应用程序都有一个组件程序来更新它。因此,如果你使用的是谷歌Chrome或谷歌地球,它会运行一个GoogleUpdate.exe应用程序,检查是否有更新可用,然后根据设置进行更新。然而,如果您不再看到它,而是在Windows11/10的任务管理器中看到一个进程updater.exe,这是有原因的。什么是Updater.exe在Windows11/10中?谷歌已经为其所有应用程序推出了更新,如GoogleEarth、GoogleDrive、Chrome等。这次更新带来了

五招教你解决黑鲨手机开不了机的问题! 五招教你解决黑鲨手机开不了机的问题! Mar 24, 2024 pm 12:27 PM

随着智能手机技术的不断发展,手机在我们日常生活中扮演着越来越重要的角色。而作为一款专注于游戏性能的旗舰手机,黑鲨手机备受玩家青睐。然而,有时候我们也会面临到黑鲨手机开不了机的情况,这时候我们就需要采取一些措施来解决这一问题。接下来,就让我们来分享五招教你解决黑鲨手机开不了机的问题:第一招:检查电池电量首先,确保你的黑鲨手机有足够的电量。可能是因为手机电量耗尽

无法在此设备上加载驱动程序怎么解决?(亲测有效) 无法在此设备上加载驱动程序怎么解决?(亲测有效) Mar 14, 2024 pm 09:00 PM

  大家都知道,如果电脑无法加载驱动程序,该设备可能就无法正常工作或与计算机进行正确的交互。那在电脑上弹出无法在此设备上加载驱动程序的提示框,我们要如何解决呢?下面小编就教大家两招轻松解决问题。  无法在此设备上加载驱动程序解决方法  1、开始菜单搜索“内核隔离”。  2、将内存完整性关闭,上方提示“内存完整性已关闭。你的设备可能易受攻击。”点击后方忽略即可,不会对使用有影响。  3.重启机器之后即可解决问题。

小红书发布自动保存图片怎么解决?发布自动保存图片在哪里? 小红书发布自动保存图片怎么解决?发布自动保存图片在哪里? Mar 22, 2024 am 08:06 AM

随着社交媒体的不断发展,小红书已经成为越来越多年轻人分享生活、发现美好事物的平台。许多用户在发布图片时遇到了自动保存的问题,这让他们感到十分困扰。那么,如何解决这个问题呢?一、小红书发布自动保存图片怎么解决?1.清除缓存首先,我们可以尝试清除小红书的缓存数据。步骤如下:(1)打开小红书,点击右下角的“我的”按钮;(2)在个人中心页面,找到“设置”并点击;(3)向下滚动,找到“清除缓存”选项,点击确认。清除缓存后,重新进入小红书,尝试发布图片看是否解决了自动保存的问题。2.更新小红书版本确保你的小

Chrome的插件扩展程序安装目录是什么 Chrome的插件扩展程序安装目录是什么 Mar 08, 2024 am 08:55 AM

Chrome的插件扩展程序安装目录是什么?正常情况下,Chrome插件扩展程序的默认安装目录如下:1、windowsxp中chrome插件默认安装目录位置:C:\DocumentsandSettings\用户名\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2、windows7中chrome插件默认安装目录位置:C:\Users\用户名\AppData\Local\Google\Chrome\User

解读Oracle错误3114:原因及解决方法 解读Oracle错误3114:原因及解决方法 Mar 08, 2024 pm 03:42 PM

标题:分析Oracle错误3114:原因及解决方法在使用Oracle数据库时,常常会遇到各种错误代码,其中错误3114是比较常见的一个。该错误一般涉及到数据库链接的问题,可能导致访问数据库时出现异常情况。本文将对Oracle错误3114进行解读,探讨其引起的原因,并给出解决该错误的具体方法以及相关的代码示例。1.错误3114的定义Oracle错误3114通

WordPress安装问题解决指南,一文搞定 WordPress安装问题解决指南,一文搞定 Feb 29, 2024 am 11:06 AM

WordPress是一款非常流行的开源内容管理系统,许多个人用户和企业选择使用WordPress来建立和管理自己的网站。然而,在安装WordPress的过程中,有时会遇到一些问题,例如数据库连接错误、文件权限问题等。本文将针对常见的WordPress安装问题进行解决指南,通过具体的代码示例帮助用户快速解决问题。问题一:数据库连接错误当在安装WordPress

See all articles