码迷,mamicode.com
首页 > Web开发 > 详细

JS中的默认行为

时间:2017-11-21 19:42:38      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:js中的默认事件

默认行为

默认行为

1什么是默认行为:说白了,就是浏览器自带的功能,比如网页右键自动弹出菜单。在输出框中敲击键盘,自动输出敲击的数值,这些都是默认行为

 

document.oncontextmenu=function  oncontextmenu作用是点击右键,呼叫右键菜单的时候

2怎么阻止默认行为

    <script>

        document.oncontextmenu=function()

        {

           return false;

        }

   </script>.

给这个函数弄一个返回值 false就是拒绝默认行为

 

3把默认行为拒绝掉,但是不拒绝自己设置的菜单

<!DOCTYPE html>

<html>

   <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

        #div1{

           background: red;display:none;position:absolute;width:80px;

          

        }

     </style>

     <script>

    

       

          

           document.oncontextmenu=function(ev)//右键触发菜单

           { 

             var oEvent=ev||event;        

             var oDiv=document.getElementById(‘div1‘);

             oDiv.style.display=‘block‘;

             oDiv.style.left=oEvent.clientX+‘px‘;

             oDiv.style.top=oEvent.clientY+‘px‘;

             return false;

           }

           document.onclick=function()

           {

             var oDiv=document.getElementById(‘div1‘);

             oDiv.style.display=‘none‘

            

           }

          

               

     </script>

   </head>

   <body>

     <div id="div1">

        <ul>

           <li>aaaa</li>

           <li>aaaa</li>

           <li>aaaa</li>

           <li>aaaa</li>

        </ul>

     </div>

   </body>

</html>

 

 

4只能输入数字的输入框例子

keydown 键盘按下  keyup键盘按下之后又松开

<!DOCTYPE html>

<html>

   <head>

     <meta charset="UTF-8">

     <title></title>

     <script>

        window.onload=function()

        {

           var oTxt=document.getElementById(‘text1‘);

           oTxt.onkeydown=function(ev)//键盘按键抬起时

           {

          

             var oEvent=ev||event;

                //alert(oEvent.keyCode)           

             if(oEvent.keyCode<48 || oEvent.keyCode>57)

             {

                return false;

             }

            

            

           };

          

        }

       

     </script>

   </head>

   <body>

     <input id="text1" type="text" />

   </body>

</html>

 

 

 

拖拽

拖拽:就是你点击一个框一直点击不松手可以跟着鼠标移动而移动

 

整体代码:

<!DOCTYPE html>

<html>

  <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

       #div1{

         background: red;

         width:100px;

         height:100px;

         position:absolute;

       }

     </style>

     <script>

       window.onload=function()

       {

         var disX=0;

         var disY=0;

         var oDiv=document.getElementById(‘div1‘);

         document.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;

            oDiv.style.left=l+‘px‘

            oDiv.style.top=t+‘px‘

           

            }

           

            document.onmouseup=function()

            {

              document.onmousemove=null;

              document.onmouseup=null;

            };

            return false;//火狐有一个默认行为,这里取消掉

         };

        

       }

     </script>

  </head>

  <body>

     <div id="div1"></div>

  </body>

</html>

但是在火狐浏览器下会有一个bug,你点一次拖拽没问题,第二次拖拽会有一个阴影,这是火狐浏览器的bug,只要关闭默认行为就可以了

return false;

 

但是还有一个小问题,就是有的人会把拖拽框拖到网页以外,然后就找不到了,怎么办呢。用下面代码解决

 

document.onmousemove=function(ev)这个函数改成如下:

 

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‘

           

                                   }


本文出自 “新网学会博客” 博客,请务必保留此出处http://xwxhvip.blog.51cto.com/13020757/1983878

JS中的默认行为

标签:js中的默认事件

原文地址:http://xwxhvip.blog.51cto.com/13020757/1983878

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!