码迷,mamicode.com
首页 > 其他好文 > 详细

自定义右键菜单

时间:2017-01-03 19:25:01      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:one   style   window   处理   size   默认   鼠标   cli   document   

在自定义右键菜单前,我们先了解一下事件默认行为:

事件默认行为:当一个事件发生的时候浏览器自己会默认做的事情;
怎么阻止?
当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false;
//oncontextmenu : 右键菜单事件,当右键菜单(环境菜单)显示出来的时候触发
document.oncontextmenu = function() {
return false;
}

示例:
1.样式:
#div1 {width:100px; height: 200px; border: 1px solid red; position: absolute; display: none;}

2.结构:
<body>
<div id="div1"></div>
</body>
3.逻辑
<script>
window.onload = function() {
var oDiv = document.getElementById(‘div1‘);
document.oncontextmenu = function(ev) { //右键菜单事件
var ev = ev || event;
oDiv.style.display = ‘block‘;
oDiv.style.left = ev.clientX + ‘px‘; // ev.clientX鼠标的横向距离
oDiv.style.top = ev.clientY + ‘px‘; // ev.clientY鼠标的纵向距离
return false;
}
document.onclick = function() {
oDiv.style.display = ‘none‘;
}

}
</script>

分享技术,分享快乐!
 
 
 

自定义右键菜单

标签:one   style   window   处理   size   默认   鼠标   cli   document   

原文地址:http://www.cnblogs.com/babywin/p/6245792.html

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