js事件中级（默认行为，拖拽）

最新推荐文章于 2024-04-16 19:44:59 发布

蔡蔡动起来

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量295

点赞数

分类专栏：智能社_js 文章标签：默认行为拖拽

本文链接：https://blog.csdn.net/weixin_40512519/article/details/82699619

版权

智能社_js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

默认行为：浏览器自带的行为。

阻止默认/右键事件：

<script>
    document.oncontextmenu=function(){
        return false;//阻止默认事件
    }
</script>

例子：

屏蔽右键菜单弹出自定义右键菜单
只能输入数字的输入框 keydown keyup事件的区别

//屏蔽右键菜单    弹出自定义右键菜单 
<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #div1{
            width: 100px;
            height: 200px;
            background: #cccccc;
            display: none;
            position: absolute;
        }
    </style>
</head>
<script>
    document.oncontextmenu=function(ev){
        var oEvent=ev||event;
        var oDiv=document.getElementById('div1');
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

        oDiv.style.display='block';
        oDiv.style.left=oEvent.clientX+'px';
        oDiv.style.top=oEvent.clientY+scrollTop+'px';

        return false;//阻止默认事件

    }
    document.onclick=function(){
        var oDiv=document.getElementById('div1');
        oDiv.style.display='none';
    }
</script>
<body style="height: 2000px; width: 1000px">
<div id="div1">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>

    </ul>
</div>
</body>

// 只能输入数字的输入框
 <script>
        window.onload= function () {
            var oTxt=document.getElementById('txt1');
            oTxt.onkeydown=function(ev){
                var oEvent=ev||event;
                //只能输入删除和数字键
                if(oEvent.keyCode!=8&&(oEvent.keyCode<48||oEvent.keyCode>57)){
                    return false;
                }
            }
        }

    </script>
</head>
<body>
只能输入数字的文本框：<input type="text" id="txt1"/>

</body>

拖拽：

简易拖拽。原理：距离不变，三个事件。
靠谱拖拽：
原有拖拽的问题：直接给document加事件
ff下，空div拖拽bug:阻止默认事件。return false
防止拖出页面：修正位置。

鼠标到拖拽框的距离是不变的。

 <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    </style>

    <script>
        //鼠标按下 鼠标抬起 鼠标移动
        window.onload=function(){

            var oDiv=document.getElementById('div1');
            var disX=0;
            var disY=0;
            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;
                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;

                //鼠标移动
                oDiv.onmousemove=function(ev){
                    var oEvent=ev||event;
                    oDiv.style.left=oEvent.clientX-disX+'px';
                    oDiv.style.top=oEvent.clientY-disY+'px';
                }
                //鼠标抬起不动
                oDiv.onmouseup=function(){
                    oDiv.onmousemove=null;
                    oDiv.onmouseup=null;
                }
            };


        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>

出现的问题：如果鼠标移动的快一点，鼠标就会从div里出来。原因是div太小了，在div里加的onmousemove,鼠标出来了自然就不停使唤了。办法：让鼠标没办法移出。

<style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    </style>

    <script>
        //鼠标按下 鼠标抬起 鼠标移动
        window.onload=function(){

            var oDiv=document.getElementById('div1');
            var disX=0;
            var disY=0;
            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;
                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;

                //鼠标移动
                document.onmousemove=function(ev){
                    var oEvent=ev||event;
                    oDiv.style.left=oEvent.clientX-disX+'px';
                    oDiv.style.top=oEvent.clientY-disY+'px';
                }
                //鼠标抬起不动
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                }
            };
            return false;//火狐下，空div会有bug.加上false则无。

        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>

防止div从上下左右拖出。

 <script>
        //鼠标按下 鼠标抬起 鼠标移动
        window.onload=function(){

            var oDiv=document.getElementById('div1');
            var disX=0;
            var disY=0;
            oDiv.onmousedown=function(ev){
                var oEvent=ev||event;

                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;

                //鼠标移动
                document.onmousemove=function(ev){
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;
                    var t=oEvent.clientY-disY;

                    if(l<0){
                        l=0;
                    }else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
                        l=document.documentElement.clientWidth-oDiv.offsetWidth;
                    }
                    if(t<0){
                        t=0;
                    }else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
                        t=document.documentElement.clientHeight-oDiv.offsetHeight;
                    }
                    oDiv.style.left=l+'px';
                    oDiv.style.top=t+'px';

                }
                //鼠标抬起不动
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                }
            };
            return false;//火狐下，空div会有bug.加上false则无。
        }
    </script>

蔡蔡动起来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件中级（默认行为，拖拽）

默认行为：浏览器自带的行为。阻止默认/右键事件：&lt;script&gt; document.oncontextmenu=function(){ return false;//阻止默认事件 }&lt;/script&gt;例子：屏蔽右键菜单弹出自定义右键菜单只能输入数字的输入框 keydown keyup事件的区别//屏蔽...
复制链接

扫一扫