JavaScript 事件 -- 默认行为,限制范围拖拽

1. 默认行为

浏览器自带行为,比如,一个空白网页,右击,会出现一个框,提供很多选项,这个弹框就是默认行为,a标签,点击会跳转,这也是默认行为,有时候,阻止默认行为是为了提供自定义的行为

oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单


<html>
<head>
    <meta charset="utf-8">
    <title>znstitle>
    <style type="text/css">
    style>
head>
<body>
    <script type="text/javascript">
        document.oncontextmenu = function() {
            //阻止默认事件,右键菜单,通过返回false,告诉系统自己能处理,不要你帮忙
            return false;
        };
    script>
body>
html>

2. 阻止默认行为

需求:阻止默认的右键菜单行为,并提供自定义的菜单,当然了,你点击那里,自定义菜单就得出现在哪里


<html>
<head>
    <meta charset="utf-8">
    <title>GuoYutitle>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #div1 {
            position: absolute;
            width: 80px;
            background: red;
            border: 1px solid black;
            display: none;
        }
    style>
head>
<body style="height: 50000000px;">
    <div id="div1">
        <ul>
            <li>menu1li>
            <li>menu2li>
            <li>menu3li>
            <li>menu4li>
        ul>
    div>
    <script type="text/javascript">
        document.oncontextmenu = function(ev) {
            var oEvent = ev || evetn;
            var oDiv = document.getElementById('div1');
            oDiv.style.display = 'block';
            oDiv.style.left = oEvent.clientX + 'px';
            oDiv.style.top = oEvent.clientY + 'px';
            return false;
        };
    script>
body>
html>

当然了,还是那个问题,凡是牵涉到clientX/Y的时候,都得考虑到被卷走的部分,scrollTop和scrollLeft,因为当网页文档不止一屏大的时候,一旦网页卷走一部分,自定义菜单就不能紧跟鼠标了,因为忽略了被卷走的部分

function getPos(ev) {
    var st = document.documentElement.scrollTop || document.body.scrollTop;
    var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
    return {x:sl+ev.clientX, y:st+ev.clientY};
}

<html>
<head>
    <meta charset="utf-8">
    <title>GuoYutitle>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        #div1 {
            position: absolute;
            width: 80px;
            background: red;
            border: 1px solid black;
            display: none;
        }
    style>
head>
<body style="height: 50000000px;">
    <div id="div1">
        <ul>
            <li>menu1li>
            <li>menu2li>
            <li>menu3li>
            <li>menu4li>
        ul>
    div>
    <script type="text/javascript">
        function getPos(ev) {
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
            return {x:sl+ev.clientX, y:st+ev.clientY};
        }
        document.oncontextmenu = function(ev) {
            var oEvent = ev || evetn;
            var oDiv = document.getElementById('div1');
            var pos = getPos(oEvent);
            oDiv.style.cssText += ';display:block;left:' + pos.x + 'px;top:' + pos.y + 'px;';
            return false;
        };
        document.onclick = function(ev) {
            var oDiv = document.getElementById('div1');
            oDiv.style.display = 'none';
        };
    script>
body>
html>

需求:只能输入数字的文本框【input】,阻止默认行为


<html>
<head>
    <meta charset="utf-8">
    <title>GuoYutitle>
    <style type="text/css">
    style>
head>
<body>
    <input type="text" id="txt1" />
    <script type="text/javascript">
        var oTxt = document.getElementById('txt1');
        oTxt.onkeydown = function() {
            return false;//输入框输入不了文字,onkeydown,每次按一下,文本框多一个字符,这是默认行为,返回false就阻止了
        };
    script>
body>
html>

return false;禁掉了所有的按键,但我们要保留数字键


<html>
<head>
    <meta charset="utf-8">
    <title>GuoYutitle>
    <style type="text/css">
    style>
head>
<body>
    <input type="text" id="txt1" />
    <script type="text/javascript">
        var oTxt = document.getElementById('txt1');
        oTxt.onkeydown = function(ev) {
            var oEvent = ev || event;
            /*
                0 -> 48,
                1 -> 49,
                2 -> 50,
                3 -> 51,
                4 -> 52,
                5 -> 53,
                6 -> 54,
                7 -> 55,
                8 -> 56,
                9 -> 57,
                delete -> 8
                left -> 37,
                right -> 39
            */
            if ((oEvent.keyCode != 8 && oEvent.keyCode != 37 && oEvent.keyCode != 39) && (oEvent.keyCode < 48 || oEvent.keyCode > 57)) {
                return false;
            }
        };
    script>
body>
html>

拖拽

需求:鼠标按下div,移动拖拽


<html>
<head>
    <meta charset="utf-8">
    <title>GuoYutitle>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    style>
head>
<body style="height: 5000000px;">
    <div id="div1">div>
    <script type="text/javascript">
        var oDiv = document.getElementById('div1');
        var disX = 0;
        var disY = 0;
        /*切记:凡是clientX/Y 的 一定记得卷走的部分*/
        /*
          document.body是DOM中Document对象里的body节点,
          document.documentElement是文档对象根节点(html)的引用,
          document.documentElement.scrollHeight网页整体高度
         */

        function getPos(ev) {
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
            return {
                x: sl + ev.clientX,
                y: st + ev.clientY
            };
        }
         /*
            onmousemove是不区分鼠标按下不按下的,我们这里要按下去之后移动。
            弹起鼠标要清除onmousemove事件,否则,div仍然跟着鼠标跑
         */

        oDiv.onmousedown = function(ev) {
            var oEvent = ev || event;
            var pos = getPos(oEvent);
            disX = pos.x - oDiv.offsetLeft;
            disY = pos.y - oDiv.offsetTop;

            oDiv.onmousemove = function(ev) {
                var oEvent = ev || event;
                var pos = getPos(oEvent);
                oDiv.style.left = pos.x - disX + 'px';
                oDiv.style.top = pos.y - disY + 'px';
            };

            oDiv.onmouseup = function() {
                oDiv.onmousemove = null;
                oDiv.onmouseup = null;
            };

        };
    script>
body>
html>

上面的代码有个很大的问题,所有的事件都是加在oDiv,一旦鼠标滑动过快,跑出div的范围,那么,div就不会随着鼠标到处跑了解决方案就是onmousemove事件需要加在document上,如下:


<html>
<head>
    <meta charset="utf-8">
    <title>GuoYutitle>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    style>
head>
<body style="height: 5000000px;">
    <div id="div1">div>
    <script type="text/javascript">
        var oDiv = document.getElementById('div1');
        var disX = 0;
        var disY = 0;
        /*切记:凡是clientX/Y 的 一定记得卷走的部分*/
        /*
          document.body是DOM中Document对象里的body节点,
          document.documentElement是文档对象根节点(html)的引用,
          document.documentElement.scrollHeight网页整体高度
         */

        function getPos(ev) {
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
            return {
                x: sl + ev.clientX,
                y: st + ev.clientY
            };
        }
         /*
            onmousemove是不区分鼠标按下不按下的,我们这里要按下去之后移动。
            弹起鼠标要清除onmousemove事件,否则,div仍然跟着鼠标跑
         */

        oDiv.onmousedown = function(ev) {
            var oEvent = ev || event;
            var pos = getPos(oEvent);
            disX = pos.x - oDiv.offsetLeft;
            disY = pos.y - oDiv.offsetTop;

            document.onmousemove = function(ev) {
                var oEvent = ev || event;
                var pos = getPos(oEvent);
                oDiv.style.left = pos.x - disX + 'px';
                oDiv.style.top = pos.y - disY + 'px';
            };

            oDiv.onmouseup = function() {
                document.onmousemove = null;
                oDiv.onmouseup = null;
            };

        };
    script>
body>
html>

但是,上面仍然有问题,当你按住div拖到浏览器边缘,鼠标都溢出浏览器到达桌面上了,移动鼠标,div仍然跟着动,而且当鼠标在浏览器客户区之外弹起之后,再挪进浏览器客户区,即使不按下去移动,div也会跟着跑,把onmouseup事件加在document上


<html>
<head>
    <meta charset="utf-8">
    <title>GuoYutitle>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    style>
head>
<body style="height: 5000000px;">
    <div id="div1">div>
    <script type="text/javascript">
        var oDiv = document.getElementById('div1');
        var disX = 0;
        var disY = 0;
        /*切记:凡是clientX/Y 的 一定记得卷走的部分*/
        /*
          document.body是DOM中Document对象里的body节点,
          document.documentElement是文档对象根节点(html)的引用,
          document.documentElement.scrollHeight网页整体高度
         */

        function getPos(ev) {
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
            return {
                x: sl + ev.clientX,
                y: st + ev.clientY
            };
        }
         /*
            onmousemove是不区分鼠标按下不按下的,我们这里要按下去之后移动。
            弹起鼠标要清除onmousemove事件,否则,div仍然跟着鼠标跑
         */

        oDiv.onmousedown = function(ev) {
            var oEvent = ev || event;
            var pos = getPos(oEvent);
            disX = pos.x - oDiv.offsetLeft;
            disY = pos.y - oDiv.offsetTop;

            document.onmousemove = function(ev) {
                var oEvent = ev || event;
                var pos = getPos(oEvent);
                oDiv.style.left = pos.x - disX + 'px';
                oDiv.style.top = pos.y - disY + 'px';
            };

            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            };

        };
    script>
body>
html>

以上在Chrome上没问题,但是在火狐上会出问题:一个空的div,拖动,没问题,松手,再拖动,拖出一个鬼影(出现两个红色div,见鬼了,而且第二个div还能被拖出客户区,到地址栏上),如果红色div内加个文字就好了,怎么解决FireFox的这个bug?这个鬼影其实是火狐的一个默认事件,需要阻止,在onmousedown事件上阻止,因为这个事件是拖拽行为的开始,鼠标按下的瞬间,拖拽就开始了


<html>
<head>
    <meta charset="utf-8">
    <title>GuoYutitle>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    style>
head>
<body style="height: 5000000px;">
    <div id="div1">div>
    <script type="text/javascript">
        var oDiv = document.getElementById('div1');
        var disX = 0;
        var disY = 0;
        function getPos(ev) {
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
            return {
                x: sl + ev.clientX,
                y: st + ev.clientY
            };
        }
        oDiv.onmousedown = function(ev) {
            var oEvent = ev || event;
            var pos = getPos(oEvent);
            disX = pos.x - oDiv.offsetLeft;
            disY = pos.y - oDiv.offsetTop;

            document.onmousemove = function(ev) {
                var oEvent = ev || event;
                var pos = getPos(oEvent);
                oDiv.style.left = pos.x - disX + 'px';
                oDiv.style.top = pos.y - disY + 'px';
            };

            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;//画龙点睛
        };
    script>
body>
html>

上面的div可以被拖出客户区,从而看不见,现在要不超过客户区,始终可见:


<html>
<head>
    <meta charset="utf-8">
    <title>GuoYutitle>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    style>
head>
<body style="width:300000000px;height: 5000000px;">
    <div id="div1">div>
    <script type="text/javascript">
        var oDiv = document.getElementById('div1');
        var disX = 0;
        var disY = 0;
        function getPos(ev) {
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
            return {x: sl + ev.clientX, y: st + ev.clientY};
        }
        function getScrollPos() {
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
            return {x: sl, y: st};          
        }
        oDiv.onmousedown = function(ev) {
            var oEvent = ev || event;
            var pos = getPos(oEvent);
            disX = pos.x - oDiv.offsetLeft;
            disY = pos.y - oDiv.offsetTop;
            console.log('offsetLeft = ' + oDiv.offsetLeft);
            console.log('disX = ' + disX);
            console.log('clientX = ' + oEvent.clientX);
            console.log('scrollLeft = ' + document.body.scrollLeft);
            document.onmousemove = function(ev) {
                var oEvent = ev || event;
                var pos = getPos(oEvent);
                var scroPos = getScrollPos();
                var sx = scroPos.x;
                var sy = scroPos.y;
                console.log('sx = ' + sx);
                console.log('sy = ' + sy);
                console.log(typeof sx);
                var l = oEvent.clientX - disX;
                var t = oEvent.clientY - disY;
                // var l = pos.x - disX;
                // var t = pos.y - 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;
                }
                l = l + sx;//加上卷走的部分
                t = t + sy;//加上卷走的部分
                oDiv.style.cssText = ';left:' + l + 'px;top:' + t + 'px;'
            };

            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;
        };
    script>
body>
html>

你可能感兴趣的:(前端,javascript,浏览器)