阻止默认行为

最新推荐文章于 2023-12-03 16:39:01 发布

斗弟

最新推荐文章于 2023-12-03 16:39:01 发布

阅读量229

点赞数

分类专栏：案例源码文章标签：阻止浏览器默认行为

本文链接：https://blog.csdn.net/L_Lintellect/article/details/99291861

版权

案例源码专栏收录该内容

3 篇文章 0 订阅

订阅专栏

阻止默认行为：

有些时候会莫名其妙的出现一个bug，自己的代码语法，逻辑都没有出错，也许就是浏览器的默认行为导致的。常见的就有；

链接的跳转
表单的提交
右键菜单
文本的选择

阻止默认行为的方法

标准：event.preventDefault();
IE8-：event.returnValue = false;
通用：retrun false

可以考虑做成兼容封装

 function stopDefault(ev) {
        if (ev && ev.preventDefault) {
            ev.preventDefault();  //W3C标准写法
        } else {
           window.event.returnValue  = false;//IE8- 写法
        }
        return false;
    }
//这么写必定可以阻止默认行为

附送一个自定义右键的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义右键菜单</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .contextMenu {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            padding: 2px;
            width: 220px;
            border: 1px solid #ddd;
        }

        .contextMenu li {
            position: relative;
            padding-left: 10px;
            border-bottom: 1px dotted #ddd;
            line-height: 2.2;
        }

        .contextMenu li:hover {
            background-color: #efefef;
        }

        .contextMenu li:last-child {
            border: none;
        }

        .contextMenu li span {
            position: absolute;
            right: 5px;
            top: 0;
            color: #999;
        }
    </style>
</head>

<body>
    <div class="contextMenu" id="contextMenu">
        <ul>
            <li>复制<span>Ctrl+C</span></li>
            <li>粘贴<span>Ctrl+V</span></li>
            <li>剪切<span>Ctrl+X</span></li>
            <li>删除<span>Del</span></li>
            <li>保存<span>Ctrl+S</span></li>
        </ul>
    </div>
</body>
<script>
    (function () {
        var contextMenu = document.getElementById('contextMenu');
        document.oncontextmenu = function (ev) {
            //contextmenu点击右键的时候触发
            // console.log('点右键了');
            ev.preventDefault();//阻止默认的菜单出现
            contextMenu.style.display = 'block';//让自定义菜单出现
            //菜单的定位
            contextMenu.style.left = ev.pageX + 'px';
            contextMenu.style.top = ev.pageY + 'px';
        }
        //点击空白处，菜单隐藏
        document.onclick = function () {
            contextMenu.style.display = 'none';
        }
        contextMenu.onclick = function (ev) {
            ev.stopPropagation();//阻止冒泡
        }
    })();
</script>
</html>