【JavaScript从入门到精通】第二十一课 JS事件中级

此内容来自开课吧石川微信公众号

上节课我们讲了关于事件的基本知识,主要包括事件对象和它的一些应用。从这节课开始我们学习2个更加高级的知识。

默认行为

当我们打开一个空白页面的时候,右键点击页面会弹出来一个菜单——当然,实际上我们从来没有通过JS写过这么一个菜单,而是浏览器自带的功能。这种浏览器本身自己带的功能和事件我们将它称之为默认行为。

在这之前,要为大家介绍一个新的事件——oncontextmenu,代表的就是当用户点击右键呼出菜单的事件。现在我们用oncontextmenu来做一些事情。值得一提的是,oncontextmenu是可以有返回值的,如果我们return一个false的话会发生什么呢?

<html>
<head>
    <meta charset="utf-8"/>
    <title>无标题文档</title>
    <script>
        document.oncontextmenu = function () {
            return false;   //阻止默认事件
        };
    </script>
</head>
<body>
</body>
</html>

大家可以自己尝试一下,如果我们return一个false值回去的话,右键菜单将会被阻止弹出。在系统默认事件中return false的话可以有效地阻止该默认事件。

当然,阻止右键菜单并不是我们最终的目的,我们最终的目的是为了能弹出自定义右键菜单,我们现在来看一下,如何在屏蔽右键菜单的基础之上,再弹出一个自己的菜单。

<html>
<head>
    <meta charset="utf-8"/>
    <title>无标题文档</title>
</head>
<body>
<div id="div1">
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

#div1 {
    position: absolute;
    width: 80px;
    background: #CCC;
    border: 1px solid black;
    display: none;
}
document.oncontextmenu = function (ev) {
    var oEvent = ev || event;
    var oDiv = document.getElementById('div1');
    oDiv.style.display = 'block';
    oDiv.style.left = oEvent.clientX + 'px';
    oDiv.style.top = oEvent.clientY + 'px';
    return false;
};
document.onclick = function () {
    var oDiv = document.getElementById('div1');
    oDiv.style.display = 'none';
};

效果如下:

【JavaScript从入门到精通】第二十一课 JS事件中级

这个程序里面,我们除了用return false阻止了默认的系统菜单外,还自定义了一个div,其位置为鼠标点击的位置,同时添加了一个点击页面其他位置时,div消失的效果——这样就完成了一个自定义右键菜单。

到目前为止,我们学习了一下阻止默认行为最简单的一种应用。现在我们再来看一个默认行为的另一种应用——大家平时在表单里面会经常需要用户去填一些用户名,密码,邮箱,qq号等信息。当我们输入qq号时,我们希望用户只能输入数字,而不能输入字母和符号,这应该怎么做到呢?这里我们需要使用上节课提过的onkeydown事件。

<html>
<head>
    <meta charset="utf-8"/>
    <title>无标题文档</title>
</head>
<body>
<input type="text" id="txt1"/>
</body>
</html>
window.onload = function () {
    var oTxt = document.getElementById('txt1');
    oTxt.onkeydown = function () {
        var oEvent = ev || event;
        //alert(oEvent.keyCode);
        //0-    48
        //9-    57
        //如果 用户按的 不是退格 并且 也不是数字if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
        {
            return false;
        }
    };
};

值得一提的是,如果我们将onkeydownreturn值也设为false的话,我们将无法在页面用键盘进行任何输入——实际上键盘输入本身也是系统的一个默认行为,因此可以用return false将它阻止掉。所以其实这个程序的逻辑很简单——通过keyCode判断输入的字符是否为数字,如果不是数字的话,return false阻止其输入即可(注意不要把keyCode为8的退格键阻止掉)。实际上来说默认行为的各种应用是非常广的,我们这里只举了两个例子,其他的大家可以自己去发掘。

拖拽

拖拽的含义大家应该都明白,这里我们先从它的原理开始说起。首先我们先来看一个简单的布局:

<html>
<head>
    <meta charset="utf-8"/>
    <title>无标题文档</title>
</head>
<body>
<div id="div1"></div>
</body>
</html>
#div1 {
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
}
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;   //这里是为了阻止火狐浏览器的一个小bug。
    };
};

大家随便在电脑上拖拽一个东西就可以发现,拖拽的一个性质是:在拖拽时,鼠标和元素右上角的距离是保持不变的。距离的求法也很简单:用鼠标的位置减去元素右上角的位置即可。

然后对于拖拽来说,大家可以很容易联想到它涉及到的几个JS事件:鼠标按下,鼠标移动和鼠标抬起。通过这些东西的组合,我们就可以轻松写出一个拖拽了(注意1.onmousemove事件需要添加为在onmousedown事件触发后才会被触发的事件2.onmousemoveonmouseup是添加给document而不是div1的事件,原因在于防止鼠标移出div或屏幕)。

效果如下:

【JavaScript从入门到精通】第二十一课 JS事件中级

现在我们就拥有了一个没有任何bug的拖拽,但虽然没有程序上的bug,但是有一些用户体验不太好的地方,比如,当用户将拖拽框拖出屏幕后可能就找不到拖拽框了。现在我们要尝试解决这个问题:

<html>
<head>
    <meta charset="utf-8"/>
    <title>无标题文档</title>
</head>
<body>
<div id="div1"></div>
</body>
</html>
#div1 {
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
}
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;
    };
};

我们用l和t来储存div的位置,当二者小于0的时候,将其变为0;当二者大于可视区宽高-元素本身宽高的时候,将其变为可视区宽高-元素本身宽高。这样就完成了一个完美的拖拽。

以上,我们就把拖拽常一些问题简单的讲解一下,后面我们还会针对拖拽做更多的应用。

如需转载,烦请注明出处:https://www.qdskill.com/javascript/1057.html

发表评论

登录后才能评论