您的位置：首页 > Web前端 > JavaScript

javascript-事件默认行为/右键菜单、拖拽

2017-06-20 00:47 465 查看

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>

2、拖拽

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {width: 200px;height: 200px;border: 1px solid #000;background: #CCC;position: absolute;}
</style>
<script type="text/javascript">
window.onload=function () {
var od=document.getElementById('div1')
var x=0
var y=0
document.onmousedown=function (ev) {
x=getPos(ev).x-od.offsetLeft
y=getPos(ev).y-od.offsetTop
document.onmousemove=function (ev) {
var w=getPos(ev).x-x
var h=getPos(ev).y-y
if(w<0){
w=0
}else if (w>document.documentElement.clientWidth-od.offsetWidth) {
w=document.documentElement.clientWidth-od.offsetWidth
}
if(h<0){
h=0
}else if (h>document.documentElement.clientHeight-od.offsetHeight) {
h=document.documentElement.clientHeight-od.offsetHeight
}
od.style.left=w+'px'
od.style.top=h+'px'

}
document.onmouseup=function () {
document.onmousemove=null
document.onmouseup=null
}
//阻止FF bug
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}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

3、不能拖出指定对象

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1 {width: 100px;height: 100px;border: 1px solid #000;background: #CCC;position: absolute;}
#div2 {width: 200px;height: 200px;border: 1px solid #000;background: red;position: relative;}

</style>
<script type="text/javascript">
window.onload=function () {
var od=document.getElementById('div1')
var od2=document.getElementById('div2')
var x=0
var y=0
document.onmousedown=function (ev) {
x=getPos(ev).x-od.offsetLeft
y=getPos(ev).y-od.offsetTop
document.onmousemove=function (ev) {
var w=getPos(ev).x-x
var h=getPos(ev).y-y
if(w<0){
w=0
}else if (w>od2.offsetWidth-od.offsetWidth) {
w=od2.offsetWidth-od.offsetWidth
}
if(h<0){
h=0
}else if (h>od2.offsetHeight-od.offsetHeight) {
h=od2.offsetHeight-od.offsetHeight
}
od.style.left=w+'px'
od.style.top=h+'px'

}
document.onmouseup=function () {
document.onmousemove=null
document.onmouseup=null
}
//阻止FF bug
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}
}
</script>
</head>
<body>
<div id="div2">
<div id="div1"></div>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 右键菜单 javascript 默认行为

相关文章推荐

新的分享

章节导航