码迷,mamicode.com
首页 > 编程语言 > 详细

javascript-默认行为/右键菜单

时间:2017-06-20 09:38:03      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:javascript-默认行为/右键菜单

1、自定义右键菜单

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        #div1 {width: 100px;height: 100px;border: 1px solid #000;position: absolute;background: #CCC;display: none;}
    </style>
    <script>
        //阻止默认事件:右键菜单
        // document.oncontextmenu=function () {
        //     return false
        // }
        function getPos(ev) {

            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
            var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft
 
            return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}

        }

        document.oncontextmenu=function (ev) {
            var oe=ev||event
            var od=document.getElementById(‘div1‘)
            od.style.display=‘block‘

            var odpos=getPos(ev)
            od.style.left=odpos.x+‘px‘
            od.style.top=odpos.y+‘px‘

            return false
        }

        document.onclick=function () {
            var od=document.getElementById(‘div1‘)
            od.style.display=‘none‘

        }

    </script>
</head>

<body>
    <div id="div1">
        <ul>
            <li>新建</li>
            <li>刷新</li>
            <li>关闭</li>
            <li>查看</li>
        </ul>
    </div>
</body>
</html>


javascript-默认行为/右键菜单

标签:javascript-默认行为/右键菜单

原文地址:http://f1yinsky.blog.51cto.com/12568071/1940052

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!