Javascript事件详解2
2013-05-14 10:03
330 查看
默认行为---没有写任何东西,浏览器自动执行的行为(事件),例如按钮的submit
阻止默认行为---oncontextmenu
阻止默认行为---onkeydown
阻止默认行为---onsubmit
自定义鼠标右键菜单
预览图
只能输入数字的文本框
拖拽---onmousedown---onmousemove---onmouseup
鼠标到div的距离。也就是disX=oEvent.clientX-oDiv.offsetLeft。(水平距离)
阻止默认行为---oncontextmenu
<script> window.oncontextmenu=function(){ return false; }; </script>
阻止默认行为---onkeydown
<script> window.onload=function(){ var oTxt=document.getElementById('txt1'); oTxt.onkeydown=function(){ return false; }; }; </script>
阻止默认行为---onsubmit
<script> window.onload=function(){ var oBtn=document.getElementById('btn1'); oBtn.onsubmit=function(){ return false; }; }; </script>
自定义鼠标右键菜单
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #ul1{width:100px;background:#ccc;position:absolute;border:2px dotted #000;display:none;}; </style> <script> document.oncontextmenu=function(ev){ var oUl=document.getElementById('ul1'); var oEvent=ev||event; oUl.style.display="block"; oUl.style.left=oEvent.clientX+'px'; oUl.style.top=oEvent.clientY+'px'; return false; }; document.onclick=function(){ var oUl=document.getElementById('ul1'); oUl.style.display="none"; }; </script> </head> <body> <ul id="ul1"> <li>wuhan</li> <li>beijing</li> <li>shanghai</li> <li>chengdu</li> <li>hangzhou</li> <li>shenzhen</li> <li>guangzhou</li> <li>tianjin</li> </ul> </body> </html>
预览图
只能输入数字的文本框
<script> window.onload=function () { var oTxt=document.getElementById('txt1'); oTxt.onkeydown=function (ev) { var oEvent=ev||event; //alert(oEvent.keyCode); //0 48 //9 57 //退格 8 if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57)) { return false; } //return false; }; }; </script>
拖拽---onmousedown---onmousemove---onmouseup
<!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> <style> #div1 {width:100px; height:100px; background:red; position:absolute;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <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;鼠标距离div的距离=可视区的距离-div左边到浏览器左侧的距离(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;停止onmousemove,否则会不停地移动 document.onmouseup=null;停止onmouseup事件 }; return false;//修复火狐3.2下面的BUG }; }; </script> </head> <body> <div id="div1"></div> </body> </html>
鼠标到div的距离。也就是disX=oEvent.clientX-oDiv.offsetLeft。(水平距离)
相关文章推荐
- JavaScript事件委托详解
- javascript event(事件对象)详解
- javascript中事件event详解
- javascript事件冒泡和事件捕获详解
- JavaScript学习总结(九)事件详解
- 详解javascript实现自定义事件
- JavaScript事件详解-jQuery的事件实现(三)
- JavaScript事件详解
- javascript性能优化之事件委托实例详解
- JavaScript 事件委托详解
- Javascript公共脚本库系列(三): 格式化事件对象/事件对象详解
- JavaScript运行机制之事件循环(Event Loop)详解
- JAVASCRIPT事件详解-------原生事件基础....
- JavaScript事件详解
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)--转
- javascript事件冒泡和事件捕获详解
- javascript事件详解笔记
- javascript的事件绑定的两种方式详解
- 原生JavaScript事件详解