在做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="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:0;} .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: 0; z-index: 99; font-size: 12px; } /*实时告警*/ .event{ position: absolute; width: 100%; color: #7d7a7a; background-color: #ffffff; bottom: 40px; z-index: 99; 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>