关于chrome浏览器事件拖动的bug（首次点击的时候也触发move的事件）
在做R80web的时候出现一个奇怪的现象，chorme现在的版本还是存在，拖动事件有mousedown、mousemove、mouseup组成，但是首次click以及失去焦点再重新点击的时候同样会触发mousemove的事件
事件问题代码
$('#mydiv').on("mousedown",function(){
console.log("this is mousedown event");
$(document).on("mousemove",function(){
console.log("this is mousemove event");
});
$(document).off("mouseup").on("mouseup",function(){
console.log("this is mouseup event");
$(document).off("mousemove")
});
});
注：火狐版本的浏览器不会存在此问题
问题存在，但是也要解决，因为这样一来，如果页面元素上有其他的事件，就有可能会触发mousemove的事件
解决办法：
在mousedown下申明一个变量，记录鼠标的位置，然后再在mousemove里面同位置判断，如果相同说明是点击的事件，否则为move事件
代码：
$('#mydiv').on("mousedown",function(e){
var m=e.clientX,n=e.clientY;
console.log("this is mousedown event");
$(document).on("mousemove",function(e){
var mousemove = { x: e.clientX, y: e.clientY };
//如果前后位置相同说明是点击事件，否则移动事件
if (m !== mousemove.x || n !== mousemove.y) {
console.log("this is mousemove event");
}
});
$(document).off("mouseup").on("mouseup",function(){
console.log("this is mouseup event");
$(document).off("mousemove")
});
});
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试chorme浏览器版本拖动问题</title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="mydiv" style="width:200px;height:200px;background: red;">
<script>
$(function(){
//有问题的
$('#mydiv').on("mousedown",function(){
console.log("this is mousedown event");
$(document).on("mousemove",function(){
console.log("this is mousemove event");
});
$(document).off("mouseup").on("mouseup",function(){
console.log("this is mouseup event");
$(document).off("mousemove")
});
});
//ok的
$('#mydiv').on("mousedown",function(e){
var m=e.clientX,n=e.clientY;
console.log("this is mousedown event");
$(document).on("mousemove",function(e){
var mousemove = { x: e.clientX, y: e.clientY };
//如果前后位置相同说明是点击事件，否则移动事件
if (m !== mousemove.x || n !== mousemove.y) {
console.log("this is mousemove event");
}
});
$(document).off("mouseup").on("mouseup",function(){
console.log("this is mouseup event");
$(document).off("mousemove")
});
});
});
</script>
</body>
</html>
问题延生：如何阻止冒泡，当我点击放大缩小图标的时候也触发拖动的事件
解决办法：
//窗口最大化的事件
$("#expander .ipn-status").on("mousedown",function(){return false}).on("click","ipn-max",function(){
//最大化的业务代码
...
})
注意：一定是要注销对应的事件才会有效果
比如这样是没有效果的：
//窗口最大化的事件
$("#expander .ipn-status").on("click","ipn-max",function(){
//最大化的业务代码
...
return false;
})
上图功能代码：
功能：
1、点击右边图标控制放大缩小，缩小后显示放大图标，放大后显示缩小图标
2、可以自由拖动事件主体，高度
$(function(){
var src_posi_Y = 0, dest_posi_Y = 0, move_Y = 0, is_mouse_down = true; //事件窗体拖拽
$("#expander").mousedown(function(e){
console.log("点击");
$("#mask").css('display','block');//开启临时遮罩层
src_posi_Y = e.pageY;
var m=e.clientX;
var n=e.clientY;
is_mouse_down = true;
$(document).on('mousemove',function(e){
var mousemove = { x: e.clientX, y: e.clientY };
if (m !== mousemove.x || n !== mousemove.y) {//如果mousemove鼠标的位置和mouseDown鼠标位置相同说明不是move事件
console.log("移动");
dest_posi_Y = e.pageY;//鼠标距离顶部的距离
var maxPosiY=$("#top").height()+$("#top_nav").height()+$("#expander").height();//间距
var mm=dest_posi_Y-maxPosiY;
if(mm<0){mm=0}
//根据距离页面顶端位置进行判断时候终止拖拽
if(dest_posi_Y<=maxPosiY){
dest_posi_Y=maxPosiY;
$("#expander").find(".ipn-max").hide()//隐藏最大化图标
$("#expander").find(".ipn-default").css("display","inline-block")//显示默认图标
}
src_posi_Y = dest_posi_Y;
$("#event").removeClass("half").removeClass("all");
$("#event").css("top",mm+"px" );
}
});
$(document).off("mouseup").on("mouseup",function(e){
console.log("弹起");
$("#mask").css('display','none');//关闭临时遮罩层
$(document).off("mousemove");
})
});
//窗口最大化的事件
$("#expander .ipn-status").on("mousedown",function(){return false}).on("click",".ipn-max",function(){//阻止冒泡
//var maxPosiY=parseFloat($("#main").height()-40)+"px";
$(this).hide();
$("#expander").find(".ipn-default").css("display","inline-block");
$("#event").removeClass("half").addClass("all");
return false;
})
//窗口还原的事件
$("#expander .ipn-status").on("mousedown",function(){return false}).on("click",".ipn-default",function(){//阻止冒泡
$(this).hide();
$("#expander").find(".ipn-max").css("display","inline-block")
$("#event").removeClass("all").addClass("half");
return false;
})
})
css
@charset "utf-8";
*{
margin:0px;
padding:0px;
}
html,body{
background-color: #f9fbf8;
height:100%
}
p{margin:;}
.lf {float:left;}
.rt {float:right;}
.clear {clear:both;}
ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd {
margin:0px;
padding:0px;
border:none;
list-style:none;
}
button{outline: none}
a{text-decoration: none} /*实时告警*/
.foot_nav{
height: 40px;
width: 100%;
text-align: center;
line-height: 40px;
color: #7d7a7a;
background-color:rgba(0, 0, 0, 0.05);
position: absolute;
bottom:;
z-index:;
font-size: 12px;
}
/*实时告警*/
.event{
position: absolute;
width: 100%;
color: #7d7a7a;
background-color: #ffffff;
bottom: 40px;
z-index:;
font-size: 12px;
display: none;
/* transition: top 0.3s; */
}
.event.half{
top:60% !important
}
.event.all{
top:0 !important
}
.event.default{
top:100%
}
.showEvent span{
display: block;
margin-left: 10px;
}
.showEvent{
height: calc(100% - 22px);
overflow: auto;
}
#expander{
width: 100%;
height: 25px;
background-color: #f3f3f3;
border-radius: 5px;
border: 1px solid #eee;
line-height: 25px;
}
#expander:hover{ cursor:n-resize;}
.ipn-tools>li{
display:inline-block;
vertical-align: top;
margin-left:20px;
}
#iframe{
height:100%;
} #expander .ipn-tools{
height:25px;
line-height:25px;
}
#expander .ipn-tools a{
display:inline-block;
height:100%;
text-align:center;
color: #7d7a7a;
width: 60px;
height: 24px;
border: 1px solid #8a8a8a;
background-color: #ddd;
}
#expander .ipn-tools li input{
vertical-align: middle;
margin:0px 3px 3px 0px;
} div.ipn-status{
margin-right:20px;
height: 25px;
line-height: 29px;
}
div.ipn-status>i{
display:inline-block;
padding:7px;
font-style: normal;
margin-right: 10px;
cursor: pointer;
}
div.ipn-status>i:hover{
transform: scale(1.1);
}
div.ipn-status>i.ipn-close:hover{
transform: scale(1.2);
}
div.ipn-status>i.ipn-max{
background-image: url(../image/max.png)
}
div.ipn-status>i.ipn-default{
display:none;
background-image: url(../image/min.png)
}
div.ipn-status>i.ipn-close{
transform: scale(1.1);
padding:6px;
background-image: url(../image/close.png);
margin: 0 0 1px 0px;
}
html
<div id="event" class="event half">
<div id="expander">
<h5 class="lf" style="margin-left:15px">实时告警</h5>
<ul class="ipn-tools lf">
<li>
<a href="javascript:;">清除告警</a>
</li>
<li>
<label>
<input type="checkbox" name="" value="">本次不再弹框
</label>
</li>
<li>
<label>
<input type="checkbox" name="" value="">不再接受任何告警信息
</label>
</li>
<li></li>
</ul>
<div class="ipn-status rt">
<i class="ipn-max" title="最大化"></i>
<i class="ipn-default" title="还原"></i>
<i class="ipn-close" title="关闭"></i>
<div class="clear"></div>
</div>
</div>
<div class="showEvent">
<span>事件1</span>
<span>事件2</span>
<span>事件3</span>
<span>事件4</span>
</div>
</div>
关于chrome浏览器事件拖动的bug（首次点击的时候也触发move的事件）的更多相关文章
- chrome浏览器模拟手机端：jquery click()点击无效解决方法
$(".sku-wrap .ok").click(); chrome浏览器模拟手机端,在油猴插件中写JS代码,然后发现click()点击失效. 解决方法:jquery的click( ...
- 关于谷歌Chrome浏览器的两个Bug?
1.网络资源下载莫名其妙的网络错误(也不支持续传?有时打开文件是损坏的?) 2.超级链接莫名的成了html下载?
- 赋予option元素点击事件后，点击select时却触发了option事件。如何解决？
将select的优先级提到option之前就可以了. 方法:为select元素添加position:relative: <select class="adt" name=&q ...
- 父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效
今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点 ...
- Chrome 浏览器垃圾回收机制与内存泄漏分析
Chorme 浏览器中的垃圾回收和内存泄漏 垃圾回收 通常情况下,垃圾数据回收分为手动回收和自动回收两种策略. 手动回收策略,何时分配内存.何时销毁内存都是由代码控制的. 自动回收策略,产生的垃圾数据 ...
- Selenium +Chrome浏览器如何模拟手机操作
Selenium +Chrome浏览器如何模拟手机操作 进入手机模式 打开谷歌浏览器,按F12,进入开发者模式,点击Toggle device toolbar,进入手机模式 设置Chrome的手机模式 ...
- 关闭chrome浏览器的input香蕉黄背景
chrome浏览器input的自动完成,点击之后自动输入,input的背景会变成香蕉黄,用如下方法修复: /* Change the white to any color ;) 就是给input设置内 ...
- 基于 Chrome 浏览器的扩展插件来进行的安装Postman
我会给你一个安装包,见附件.你应该下载下来,解压缩到你喜欢的位置. 打开 Chrome 浏览器的「扩展程序」 点击「加载已解压的扩展程序...」按钮,找到你刚刚下载的安装包的位置,点击确定. 你去看看 ...
- 关于 Chrome 浏览器中 onresize 事件的 Bug
我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...
随机推荐
- shell 脚本 随机抽取班上学生
#!/bin/bash # jw=('王浩' '谢云生' '黄科杨' '何星宇' '张宸兵' '邓培林' '刘桃' '杨沛东' '楚齐文' '咸鱼' '杨东' '>黄庭辉' '郑少文' '师靖' ...
- 别做HR最讨厌的求职者
有些求职者认为自己各方面都与所应聘的职位要求相匹配,因此在被淘汰之后总是特别不解,努力回忆起每个面试环节,却始终找不到原因.是的,也许你真的很优秀,但是你被淘汰了,原因也许并不大,只是你得罪了HR.其 ...
- Java反射API研究(2)——java.lang.reflect详细内容与关系
对于最新的java1.8而言,reflect中接口的结构是这样的: java.lang.reflect.AnnotatedElement java.lang.reflect.AnnotatedType ...
- delphi FastReport 安装方法
(最近记忆力真的不行了,装了很多遍,过段时间重装delphi又不记得了,又要折腾,现在先记录下来,留给下次翻) 1.下载安装包,这里提供一个百度云盘共享链接,版本为fastreport5: https ...
- TSQL--标示列、GUID 、序列
--1. IDENTIY 列不能为空,不能设默认值,创建后不能使用ALTER TABLE TableName ALTER COLUMN修改,每张表只能有一个自增列--2. 查看当前值:SELECT I ...
- js自执行函数、调用递归函数、圆括号运算符、函数声明的提升
前言 起因是我要在jquery的ajax中需要根据返回值来决定是否继续发起ajax请求,这是一个有条件的循环,符合条件就跳出.可以使用while循环的,但是想了想还是递归调用好用. 调用递归函数 递归 ...
- hdu X问题 （中国剩余定理不互质）
http://acm.hdu.edu.cn/showproblem.php?pid=1573 X问题 Time Limit: 1000/1000 MS (Java/Others) Memory ...
- 不用外部插件启用u盘ntfs写功能
mac下启用NTFS u盘读写功能. 不用要任何外部插件,其实mac本来就支持,只是因为专利原因隐藏了而已. macbook:~ uwe$ sudo umount /Volumes/UNTITLED ...
- css细节复习笔记——内边距、边框和外边距
一个元素的内边距.边框和外边距属性会影响着整个文档如何布局,更重要的是,它们会严重影响给定元素的外观. 高度和宽度 这两个属性不能应用到行内非替换元素,其高度和宽度由链接的内容确定,而不是由创作人员确 ...
- python--生成器,生成器推导式, yield from
一.生成器 生成器的本质就是迭代器,它一个一个的创建对象. 在python中有三种方式获取生成器: 1.通过生成器函数 2.通过各种推导式来实现生成器 3.通过数据的类型转换也可以获取生成器 二.生成 ...