JavaScript 事件 -- 默认行为,限制范围拖拽
2017-04-26 17:26
337 查看
1. 默认行为
浏览器自带行为,比如,一个空白网页,右击,会出现一个框,提供很多选项,这个弹框就是默认行为,a标签,点击会跳转,这也是默认行为,有时候,阻止默认行为是为了提供自定义的行为oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zns</title> <style type="text/css"> </style> </head> <body> <script type="text/javascript"> document.oncontextmenu = function() { //阻止默认事件,右键菜单,通过返回false,告诉系统自己能处理,不要你帮忙 return false; }; </script> </body> </html>
2. 阻止默认行为
需求:阻止默认的右键菜单行为,并提供自定义的菜单,当然了,你点击那里,自定义菜单就得出现在哪里<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GuoYu</title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; } #div1 { position: absolute; width: 80px; background: red; border: 1px solid black; display: none; } </style> </head> <body style="height: 50000000px;"> <div id="div1"> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> </div> <script type="text/javascript"> document.oncontextmenu = function(ev) { var oEvent = ev || evetn; var oDiv = document.getElementById('div1'); oDiv.style.display = 'block'; oDiv.style.left = oEvent.clientX + 'px'; oDiv.style.top = oEvent.clientY + 'px'; return false; }; </script> </body> </html>
当然了,还是那个问题,凡是牵涉到clientX/Y的时候,都得考虑到被卷走的部分,scrollTop和scrollLeft,因为当网页文档不止一屏大的时候,一旦网页卷走一部分,自定义菜单就不能紧跟鼠标了,因为忽略了被卷走的部分
function getPos(ev) { var st = document.documentElement.scrollTop || document.body.scrollTop; var sl = document.documentElement.scrollLeft || document.body.scrollLeft; return {x:sl+ev.clientX, y:st+ev.clientY}; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GuoYu</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
#div1 {
position: absolute;
width: 80px;
background: red;
border: 1px solid black;
display: none;
}
</style>
</head>
<body style="height: 50000000px;">
<div id="div1">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</div>
<script type="text/javascript">
function getPos(ev) { var st = document.documentElement.scrollTop || document.body.scrollTop; var sl = document.documentElement.scrollLeft || document.body.scrollLeft; return {x:sl+ev.clientX, y:st+ev.clientY}; }
document.oncontextmenu = function(ev) {
var oEvent = ev || evetn;
var oDiv = document.getElementById('div1');
var pos = getPos(oEvent);
oDiv.style.cssText += ';display:block;left:' + pos.x + 'px;top:' + pos.y + 'px;';
return false;
};
document.onclick = function(ev) {
var oDiv = document.getElementById('div1');
oDiv.style.display = 'none';
};
</script>
</body>
</html>
需求:只能输入数字的文本框【input】,阻止默认行为
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GuoYu</title> <style type="text/css"> </style> </head> <body> <input type="text" id="txt1" /> <script type="text/javascript"> var oTxt = document.getElementById('txt1'); oTxt.onkeydown = function() { return false;//输入框输入不了文字,onkeydown,每次按一下,文本框多一个字符,这是默认行为,返回false就阻止了 }; </script> </body> </html>
return false;禁掉了所有的按键,但我们要保留数字键
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GuoYu</title> <style type="text/css"> </style> </head> <body> <input type="text" id="txt1" /> <script type="text/javascript"> var oTxt = document.getElementById('txt1'); oTxt.onkeydown = function(ev) { var oEvent = ev || event; /* 0 -> 48, 1 -> 49, 2 -> 50, 3 -> 51, 4 -> 52, 5 -> 53, 6 -> 54, 7 -> 55, 8 -> 56, 9 -> 57, delete -> 8 left -> 37, right -> 39 */ if ((oEvent.keyCode != 8 && oEvent.keyCode != 37 && oEvent.keyCode != 39) && (oEvent.keyCode < 48 || oEvent.keyCode > 57)) { return false; } }; </script> </body> </html>
拖拽
需求:鼠标按下div,移动拖拽<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GuoYu</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 100px; height: 100px; background: red; position: absolute; } </style> </head> <body style="height: 5000000px;"> <div id="div1"></div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); var disX = 0; var disY = 0; /*切记:凡是clientX/Y 的 一定记得卷走的部分*/ /* document.body是DOM中Document对象里的body节点, document.documentElement是文档对象根节点(html)的引用, document.documentElement.scrollHeight网页整体高度 */ function getPos(ev) { var st = document.documentElement.scrollTop || document.body.scrollTop; var sl = document.documentElement.scrollLeft || document.body.scrollLeft; return { x: sl + ev.clientX, y: st + ev.clientY }; } /* onmousemove是不区分鼠标按下不按下的,我们这里要按下去之后移动。 弹起鼠标要清除onmousemove事件,否则,div仍然跟着鼠标跑 */ oDiv.onmousedown = function(ev) { var oEvent = ev || event; var pos = getPos(oEvent); disX = pos.x - oDiv.offsetLeft; disY = pos.y - oDiv.offsetTop; oDiv.onmousemove = function(ev) { var oEvent = ev || event; var pos = getPos(oEvent); oDiv.style.left = pos.x - disX + 'px'; oDiv.style.top = pos.y - disY + 'px'; }; oDiv.onmouseup = function() { oDiv.onmousemove = null; oDiv.onmouseup = null; }; }; </script> </body> </html>
上面的代码有个很大的问题,所有的事件都是加在oDiv,一旦鼠标滑动过快,跑出div的范围,那么,div就不会随着鼠标到处跑了解决方案就是onmousemove事件需要加在document上,如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GuoYu</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 100px; height: 100px; background: red; position: absolute; } </style> </head> <body style="height: 5000000px;"> <div id="div1"></div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); var disX = 0; var disY = 0; /*切记:凡是clientX/Y 的 一定记得卷走的部分*/ /* document.body是DOM中Document对象里的body节点, document.documentElement是文档对象根节点(html)的引用, document.documentElement.scrollHeight网页整体高度 */ function getPos(ev) { var st = document.documentElement.scrollTop || document.body.scrollTop; var sl = document.documentElement.scrollLeft || document.body.scrollLeft; return { x: sl + ev.clientX, y: st + ev.clientY }; } /* onmousemove是不区分鼠标按下不按下的,我们这里要按下去之后移动。 弹起鼠标要清除onmousemove事件,否则,div仍然跟着鼠标跑 */ oDiv.onmousedown = function(ev) { var oEvent = ev || event; var pos = getPos(oEvent); disX = pos.x - oDiv.offsetLeft; disY = pos.y - oDiv.offsetTop; document.onmousemove = function(ev) { var oEvent = ev || event; var pos = getPos(oEvent); oDiv.style.left = pos.x - disX + 'px'; oDiv.style.top = pos.y - disY + 'px'; }; oDiv.onmouseup = function() { document.onmousemove = null; oDiv.onmouseup = null; }; }; </script> </body> </html>
但是,上面仍然有问题,当你按住div拖到浏览器边缘,鼠标都溢出浏览器到达桌面上了,移动鼠标,div仍然跟着动,而且当鼠标在浏览器客户区之外弹起之后,再挪进浏览器客户区,即使不按下去移动,div也会跟着跑,把onmouseup事件加在document上
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GuoYu</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 100px; height: 100px; background: red; position: absolute; } </style> </head> <body style="height: 5000000px;"> <div id="div1"></div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); var disX = 0; var disY = 0; /*切记:凡是clientX/Y 的 一定记得卷走的部分*/ /* document.body是DOM中Document对象里的body节点, document.documentElement是文档对象根节点(html)的引用, document.documentElement.scrollHeight网页整体高度 */ function getPos(ev) { var st = document.documentElement.scrollTop || document.body.scrollTop; var sl = document.documentElement.scrollLeft || document.body.scrollLeft; return { x: sl + ev.clientX, y: st + ev.clientY }; } /* onmousemove是不区分鼠标按下不按下的,我们这里要按下去之后移动。 弹起鼠标要清除onmousemove事件,否则,div仍然跟着鼠标跑 */ oDiv.onmousedown = function(ev) { var oEvent = ev || event; var pos = getPos(oEvent); disX = pos.x - oDiv.offsetLeft; disY = pos.y - oDiv.offsetTop; document.onmousemove = function(ev) { var oEvent = ev || event; var pos = getPos(oEvent); oDiv.style.left = pos.x - disX + 'px'; oDiv.style.top = pos.y - disY + 'px'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; }; </script> </body> </html>
以上在Chrome上没问题,但是在火狐上会出问题:一个空的div,拖动,没问题,松手,再拖动,拖出一个鬼影(出现两个红色div,见鬼了,而且第二个div还能被拖出客户区,到地址栏上),如果红色div内加个文字就好了,怎么解决FireFox的这个bug?这个鬼影其实是火狐的一个默认事件,需要阻止,在onmousedown事件上阻止,因为这个事件是拖拽行为的开始,鼠标按下的瞬间,拖拽就开始了
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GuoYu</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 100px; height: 100px; background: red; position: absolute; } </style> </head> <body style="height: 5000000px;"> <div id="div1"></div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); var disX = 0; var disY = 0; function getPos(ev) { var st = document.documentElement.scrollTop || document.body.scrollTop; var sl = document.documentElement.scrollLeft || document.body.scrollLeft; return { x: sl + ev.clientX, y: st + ev.clientY }; } oDiv.onmousedown = function(ev) { var oEvent = ev || event; var pos = getPos(oEvent); disX = pos.x - oDiv.offsetLeft; disY = pos.y - oDiv.offsetTop; document.onmousemove = function(ev) { var oEvent = ev || event; var pos = getPos(oEvent); oDiv.style.left = pos.x - disX + 'px'; oDiv.style.top = pos.y - disY + 'px'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; return false;//画龙点睛 }; </script> </body> </html>
上面的div可以被拖出客户区,从而看不见,现在要不超过客户区,始终可见:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GuoYu</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 100px; height: 100px; background: red; position: absolute; } </style> </head> <body style="width:300000000px;height: 5000000px;"> <div id="div1"></div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); var disX = 0; var disY = 0; function getPos(ev) { var st = document.documentElement.scrollTop || document.body.scrollTop; var sl = document.documentElement.scrollLeft || document.body.scrollLeft; return {x: sl + ev.clientX, y: st + ev.clientY}; } function getScrollPos() { var st = document.documentElement.scrollTop || document.body.scrollTop; var sl = document.documentElement.scrollLeft || document.body.scrollLeft; return {x: sl, y: st}; } oDiv.onmousedown = function(ev) { var oEvent = ev || event; var pos = getPos(oEvent); disX = pos.x - oDiv.offsetLeft; disY = pos.y - oDiv.offsetTop; console.log('offsetLeft = ' + oDiv.offsetLeft); console.log('disX = ' + disX); console.log('clientX = ' + oEvent.clientX); console.log('scrollLeft = ' + document.body.scrollLeft); document.onmousemove = function(ev) { var oEvent = ev || event; var pos = getPos(oEvent); var scroPos = getScrollPos(); var sx = scroPos.x; var sy = scroPos.y; console.log('sx = ' + sx); console.log('sy = ' + sy); console.log(typeof sx); var l = oEvent.clientX - disX; var t = oEvent.clientY - disY; // var l = pos.x - disX; // var t = pos.y - disY; if (l < 0) { l = 0; } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) { l = document.documentElement.clientWidth - oDiv.offsetWidth; } if (t < 0) { t = 0; } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) { t = document.documentElement.clientHeight - oDiv.offsetHeight; } l = l + sx;//加上卷走的部分 t = t + sy;//加上卷走的部分 oDiv.style.cssText = ';left:' + l + 'px;top:' + t + 'px;' }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; return false; }; </script> </body> </html>
相关文章推荐
- javascript-事件默认行为/右键菜单、拖拽
- 拖拽的基本函数(已有限制范围和修复浏览器默认行为以及磁性吸附、碰撞检测、改变层大小、模拟滚动条)
- javascript阻止事件冒泡和浏览器的默认行为
- 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
- JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
- js事件中级(默认行为、右击菜单、只输入数字的文本框、拖拽)
- javascript 阻止事件的默认行为
- javascript阻止冒泡和默认事件(默认行为)
- javascript阻止事件冒泡和浏览器的默认行为
- javascript中阻止事件冒泡,阻止事件默认行为
- javascript解决多事件冲突的问题(冒泡行为、默认行为)
- javascript阻止事件冒泡和浏览器的默认行为
- javascript——事件默认行为
- javascript阻止事件冒泡和浏览器的默认行为
- javascript 阻止事件冒泡 与 浏览器的默认行为
- javascript——限制范围的拖拽
- javascript阻止事件冒泡和浏览器的默认行为
- javascript-阻止事件冒泡和事件默认行为
- JavaScript 事件流(事件要素/普通事件/事件绑定/事件冒泡/阻止冒泡/阻止默认行为)
- javascript阻止事件冒泡和浏览器的默认行为