JavaScript 事件 -- 默认行为，限制范围拖拽
1. 默认行为
浏览器自带行为，比如，一个空白网页，右击，会出现一个框，提供很多选项，这个弹框就是默认行为，a标签，点击会跳转，这也是默认行为，有时候，阻止默认行为是为了提供自定义的行为
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
<html>
<head>
<meta charset="utf-8">
<title>znstitle>
<style type="text/css">
style>
head>
<body>
<script type="text/javascript">
document.oncontextmenu = function() {
//阻止默认事件，右键菜单，通过返回false，告诉系统自己能处理，不要你帮忙
return false;
};
script>
body>
html>2. 阻止默认行为
需求：阻止默认的右键菜单行为，并提供自定义的菜单，当然了，你点击那里，自定义菜单就得出现在哪里
<html>
<head>
<meta charset="utf-8">
<title>GuoYutitle>
<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>menu1li>
<li>menu2li>
<li>menu3li>
<li>menu4li>
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};
}
<html>
<head>
<meta charset="utf-8">
<title>GuoYutitle>
<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>menu1li>
<li>menu2li>
<li>menu3li>
<li>menu4li>
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】，阻止默认行为
<html>
<head>
<meta charset="utf-8">
<title>GuoYutitle>
<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;禁掉了所有的按键，但我们要保留数字键
<html>
<head>
<meta charset="utf-8">
<title>GuoYutitle>
<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，移动拖拽
<html>
<head>
<meta charset="utf-8">
<title>GuoYutitle>
<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上,如下：
<html>
<head>
<meta charset="utf-8">
<title>GuoYutitle>
<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上
<html>
<head>
<meta charset="utf-8">
<title>GuoYutitle>
<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事件上阻止，因为这个事件是拖拽行为的开始，鼠标按下的瞬间，拖拽就开始了
<html>
<head>
<meta charset="utf-8">
<title>GuoYutitle>
<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可以被拖出客户区，从而看不见，现在要不超过客户区，始终可见：
<html>
<head>
<meta charset="utf-8">
<title>GuoYutitle>
<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>