document.oncontextmenu
=
function(){return
false}
//禁止鼠标右键菜单显示
var
res
=
document.getElementById('box')
//找到id为box的div
document.body.onmouseup
=
function(e){
//在body里点击触发事件
if(e.button===2){
//如果button=1（鼠标左键），button=2（鼠标右键），button=0（鼠标中间键）
console.log(e)
//将传进去的参数打印出来
console.log(e.offsetY)
//打印出鼠标点击的Y轴坐标
console.log(e.offsetX)
//打印出鼠标点击的X轴坐标
res.style.top
=
e.offsetY+'px'
//鼠标点击时给div定位Y轴
res.style.left
=
e.offsetX+'px'
//鼠标点击时给div定位X轴
res.style.display
=
'block'
//显示div盒子
}else{
res.style.display
=
'none'
//否则不显示div盒子
}
}
以上这篇JavaScript鼠标事件,点击鼠标右键,d出div的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现自定义右键菜单</title>
<meta http-equiv="content-type" content="text/htmlcharset=gbk">
<script src="http://api.51ditu.com/js/ajax.js"></script>
<style type="text/css">
#container {
text-align : center
width : 500px
height : 500px
border : 1px solid blue
margin : 0 auto
}
.skin {
width : 100px
border : 1px solid gray
padding : 2px
visibility : hidden
position : absolute
}
div.menuitems {
margin : 1px 0
}
div.menuitems a {
text-decoration : none
}
div.menuitems:hover {
background-color : #c0c0c0
}
</style>
<script>
window.onload = function() {
var container = document.getElementById('container')
var menu = document.getElementById('menu')
/*显示菜单*/
function showMenu() {
var evt = window.event || arguments[0]
/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
var rightedge = container.clientWidth-evt.clientX
var bottomedge = container.clientHeight-evt.clientY
/*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
if (rightedge <menu.offsetWidth)
menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px"
else
/*否则，就定位菜单的左坐标为当前鼠标位置*/
menu.style.left = container.scrollLeft + evt.clientX + "px"
/*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
if (bottomedge <menu.offsetHeight)
menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px"
else
/*否则，就定位菜单的上坐标为当前鼠标位置*/
menu.style.top = container.scrollTop + evt.clientY + "px"
/*设置菜单可见*/
menu.style.visibility = "visible"
LTEvent.addListener(menu,"contextmenu",LTEvent.cancelBubble)
}
/*隐藏菜单*/
function hideMenu() {
menu.style.visibility = 'hidden'
}
LTEvent.addListener(container,"contextmenu",LTEvent.cancelBubble)
LTEvent.addListener(container,"contextmenu",showMenu)
LTEvent.addListener(document,"click",hideMenu)
}
</script>
</head>
<body>
<div id="menu" class="skin">
<div class="menuitems">
<a href="javascript:history.back()">后退</a>
</div>
<div class="menuitems">
<a href="javascript:history.back()">前进</a>
</div>
<hr>
<div class="menuitems">
<a href="http://api.51ditu.com/" target="_blank">地图api</a>
</div>
<div class="menuitems">
<a href="http://www.51ditu.com/traffic/index.html" target="_blank">实时交通</a>
</div>
<div class="menuitems">
<a href="http://www.51ditu.com" target="_blank">地图搜索</a>
</div>
<div class="menuitems">
<a href="http://nav.51ditu.com" target="_blank">驾驶导航</a>
</div>
<hr>
<div class="menuitems">
<a href="http://uu.51ditu.com" target="_blank">灵图UU</a>
</div>
<div class="menuitems">
<a href="http://lushu.51ditu.com" target="_blank">路书下载</a>
</div>
<hr>
<div class="menuitems">
<a href="http://www.lingtu.com" target="_blank">关于本站</a>
</div>
<div class="menuitems">
<a href="http://emap.51ditu.com/link/link.html" target="_bland">友情链接</a>
</div>
</div>
<div id="container">
<p>右键此区域</p>
</div>
</body>
</html>
如下参考：
1.页面复zhidao制有一个id为c2的div，下面有一个子div，下面有一个按钮，事件是用来点击100个adddiv。
2.在event函数中，定义一个内内容为degreediv字符的字符串变量。
3.然后使用jquery的append将已知的div字符串添加到c2div，如下容所示。
4.运行页面，现在只看到一个div，如下图所示。
5.单击下面的按钮来触发添加div的逻辑，如下所示。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）