day49—JavaScript阻止浏览器默认行为

转行学开发，代码100天——2018-05-04

 

今天主要说明一下通过JavaScript对浏览器默认行为的阻止操作。比如右键菜单的行为。

阻止默认行为的语句为：

return false;

例如，阻止浏览器默认菜单同时弹出自定义菜单的一个功能实现如下：

<div id="div1">
    <ul>
        <li>24334</li>
        <li>sdafds</li>
        <li>wrw23</li>
    </ul>
</div>

    <style type="text/css">
        ul li{
            list-style: none;
            text-align: left;
            font-size: 12px;    
        }
        #div1{
            width: 80px;
            width: 100px;
            position: absolute;
            background: #ccc;
            border: 1px solid black;
            display: none;
        }
    </style>

Js部分需要对文档添加右键事件，通过该事件取消浏览器默认的右键菜单，同时弹出自定义菜单；

添加点击事件，通过点击实现自定义右键菜单的消失。

<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>