JS中mouseup事件丢失的原因与解决办法


Posted in Javascript onJune 14, 2017

前言

当实现类似Excel选中区域的功能时,经常出现 mouseup 事件丢失的情况,由于缺少了 mouseup 事件,导致一个完整的操作无法进行。

如果你是想进行拖拽移动操作,也可以参考本文。

原因

目前发现两个原因:

  • 触发了浏览器的 drag 操作,导致mouseup丢失。
  • 由于鼠标离开了操作的区域,触发了mouseleave导致mouseup丢失。

解决办法

第一种情况

通过执行下面的代码阻止系统默认的操作来防止触发 drag 操作:

//在事件中
e=e || window.event;
pauseEvent(e);

//阻止事件冒泡
//不仅仅要stopPropagation,还要preventDefault
function pauseEvent(e){
 if(e.stopPropagation) e.stopPropagation();
 if(e.preventDefault) e.preventDefault();
 e.cancelBubble=true;
 e.returnValue=false;
 return false;
}

通过对事件调用pauseEvent方法可以防止出现drag操作,因此在区域内可以避免mouseup丢失。即使你想实现的本来就是 drag 操作,也可以通过创建跟随鼠标移动的dom元素实现效果。

第二种情况

由于鼠标移到了区域外,触发了 mouseleave 操作,因此在这种情况下要监听 mouseleave 操作,当触发该操作时可以停止或者还原状态。

特别注意的地方

当处理鼠标事件时,可以还要考虑是否要控制按下那个键时才允许操作。

Mouse事件中有一个 buttons 属性,该值标示鼠标按下了一个或者多个按键,如果按下的键为多个,值则为多个:

      0 : 没有按键或者是没有初始化

      1 : 鼠标左键

      2 : 鼠标右键

      4 : 鼠标滚轮或者是中键

      8 : 第四按键 (通常是“浏览器后退”按键)

      16 : 第五按键 (通常是“浏览器前进”)

多个值的时候,相当于进行|操作,即鼠标左右键同时按下时1|2=3。判断是否按下左键可以用value&1!=0进行,例如左右键同时按下时3&1!=0是true,说明按下了左键。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery1.6 正式版发布并提供下载
May 05 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
新手vue构建单页面应用实例代码
Sep 18 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 #Javascript
jQuery.form.js的使用详解
Jun 14 #jQuery
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 #Javascript
详解Vue爬坑之vuex初识
Jun 14 #Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 #Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 #Javascript
vue时间格式化实例代码
Jun 13 #Javascript
You might like
php 冒泡排序 交换排序法
2011/05/10 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
Django实现图片文字同时提交的方法
2015/05/26 Python
Django实现分页功能
2018/07/02 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
2014年自我评价
2014/01/04 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL