js事件中級（預設行為，拖拽）
阿新 • • 發佈：2018-12-09
預設行為：瀏覽器自帶的行為。
阻止預設/右鍵事件：
<script>
document.oncontextmenu=function(){
return false;//阻止預設事件
}
</script>例子：
- 遮蔽右鍵選單 彈出自定義右鍵選單
- 只能輸入數字的輸入框 keydown keyup事件的區別
//遮蔽右鍵選單 彈出自定義右鍵選單 <style> *{ margin: 0; padding: 0; list-style: none; } #div1{ width: 100px; height: 200px; background: #cccccc; display: none; position: absolute; } </style> </head> <script> document.oncontextmenu=function(ev){ var oEvent=ev||event; var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; oDiv.style.display='block'; oDiv.style.left=oEvent.clientX+'px'; oDiv.style.top=oEvent.clientY+scrollTop+'px'; return false;//阻止預設事件 } document.onclick=function(){ var oDiv=document.getElementById('div1'); oDiv.style.display='none'; } </script> <body style="height: 2000px; width: 1000px"> <div id="div1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body>
// 只能輸入數字的輸入框 <script> window.onload= function () { var oTxt=document.getElementById('txt1'); oTxt.onkeydown=function(ev){ var oEvent=ev||event; //只能輸入刪除和數字鍵 if(oEvent.keyCode!=8&&(oEvent.keyCode<48||oEvent.keyCode>57)){ return false; } } } </script> </head> <body> 只能輸入數字的文字框：<input type="text" id="txt1"/> </body>
拖拽：
- 簡易拖拽。原理：距離不變，三個事件。
- 靠譜拖拽：
- 原有拖拽的問題：直接給document加事件
- ff下，空div拖拽bug:阻止預設事件。return false
- 防止拖出頁面：修正位置。
滑鼠到拖拽框的距離是不變的。
<style> #div1{ width: 200px; height: 200px; background: red; position: absolute; } </style> <script> //滑鼠按下 滑鼠擡起 滑鼠移動 window.onload=function(){ var oDiv=document.getElementById('div1'); var disX=0; var disY=0; oDiv.onmousedown=function(ev){ var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; //滑鼠移動 oDiv.onmousemove=function(ev){ var oEvent=ev||event; oDiv.style.left=oEvent.clientX-disX+'px'; oDiv.style.top=oEvent.clientY-disY+'px'; } //滑鼠擡起不動 oDiv.onmouseup=function(){ oDiv.onmousemove=null; oDiv.onmouseup=null; } }; } </script> </head> <body> <div id="div1"></div> </body>
出現的問題：如果滑鼠移動的快一點，滑鼠就會從div裡出來。原因是div太小了，在div里加的onmousemove,鼠標出來了自然就不停使喚了。辦法：讓滑鼠沒辦法移出。
<style>
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
}
</style>
<script>
//滑鼠按下 滑鼠擡起 滑鼠移動
window.onload=function(){
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
//滑鼠移動
document.onmousemove=function(ev){
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
}
//滑鼠擡起不動
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
};
return false;//火狐下，空div會有bug.加上false則無。
}
</script>
</head>
<body>
<div id="div1"></div>
</body>防止div從上下左右拖出。
<script>
//滑鼠按下 滑鼠擡起 滑鼠移動
window.onload=function(){
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
//滑鼠移動
document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-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;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
//滑鼠擡起不動
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
};
return false;//火狐下，空div會有bug.加上false則無。
}
</script>