JavaScript事件中级

最新推荐文章于 2020-12-06 19:22:09 发布

可芭乐

最新推荐文章于 2020-12-06 19:22:09 发布

阅读量432

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.youkuaiyun.com/a839371666/article/details/54868915

JavaScript基础专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何使用JavaScript控制网页的交互行为，包括阻止浏览器的默认行为、实现自定义右键菜单、创建只允许输入数字的输入框及实现元素的拖拽功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认行为

默认行为
什么是默认行为
当空网页的时候点击右键会出现菜单，这就是默认行为

阻止默认行为
普通写法：return false

document.oncontextmenu = function (){
        return false;
    }

例子：屏蔽右键菜单
弹出自定义右键菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #div1 {
        position: absolute;
        width: 80px;
        background: #ccc;
        border: 1px solid black;
        display: none;
    }
</style>
<script type="text/javascript">
    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'
    }
</script>
</head>
<body>
    <div id="div1">
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
        </ul>
    </div>
</body>
</html>

例子：只能输入数字的输入框
keydown、keyup事件的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css"></style>
<script type="text/javascript">
    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>
</html>

拖拽

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    #div1 {
        width: 200px;
        height: 200px;
        background: red;
        position: absolute;
    }
</style>
<script type="text/javascript">
    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;
    }
</script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>