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

2021-01-2609:22:45WEB前端开发Comments2,533 views字数 1061阅读模式

jQuery实现拖动是网上抄的代码,但发现有一个JavaScript拖动时触发点击事件的BUG,让基友老嫖给修复了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20878.html

<!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>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/20878.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/20878.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定