关于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="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>

View Code

问题延生：如何阻止冒泡，当我点击放大缩小图标的时候也触发拖动的事件

解决办法：

//窗口最大化的事件
$("#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;
}

View Code

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>

View Code