jQuery实现拖动，且拖动时不触发点击事件的BUG

2021-1-26

jQuery实现拖动是网上抄的代码，但发现有一个JavaScript拖动时触发点击事件的BUG，让基友老嫖给修复了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #move{
                width: 200px;
                height: 200px;
                background-color: red;
                position: absolute;
                cursor: move;
            }
        </style>
    </head>
    <body>
        <div id="move">Hello World！</div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $('#move').on('mousedown', function(e) { //鼠标按下
            // 判断一下这个按下是点击还是拖动
            var isClick = true;

            $(document).on('mousemove', (e) => {//鼠标移动
                let left = e.clientX - $(this).width() / 2//计算元素left值
                let top = e.clientY - $(this).height() / 2//计算元素top值

                top = suan(top, 0, $(document).innerHeight() - $(this).height())//调用封装的方法
                left = suan(left, 0,$(document).innerWidth() - $(this).width())//调用封装的方法
                $(this).css({ //给盒子设置坐标
                    left,
                    top
                })
                //拖动后，把isClick设为false，后面就不会执行点击事件
                isClick = false;

                e.preventDefault();
            })
            $(document).on('mouseup', (e) => {//鼠标抬起
                //当isClick为true时，就执行点击事件
                if( isClick ){
                    msgboxurl()
                }
                $(document).off('mousemove mouseup')//移除鼠标移动、鼠标抬起事件
            })
        })
        function suan(o, min, max) { //重复封装
            o < min ? o = min : o > max ? o = max : ''//限制出界
            return o
        }
        function msgboxurl(){
            alert("点击效果");
        }
    </script>
</html>

THE END

Html：表格Table自适应宽度，指定列固定宽度，其他列均分宽度

<<上一篇

网站被恶意镜像，怎么办？9个解决思路

下一篇>>