JS事件中级

港控/mmm° 2022-06-04 05:07 150阅读 0赞

## 默认行为 ##

当我们打开一个空白页面的时候，右键点击页面会弹出来一个菜单——当然，实际上我们从来没有通过JS写过这么一个菜单，而是浏览器自带的功能。这种浏览器本身自己带的功能和事件我们将它称之为默认行为。

在这之前，要为大家介绍一个新的事件——oncontextmenu，代表的就是当用户点击右键呼出菜单的事件。现在我们用oncontextmenu来做一些事情。值得一提的是，oncontextmenu是可以有返回值的，如果我们return一个false的话会发生什么呢？

<html>
     <head> 
      <meta charset="utf-8" /> 
      <title>无标题文档</title> 
      <script>
    document.οncοntextmenu=function ()
    {
    	return false;	//阻止默认事件
    };
    </script> 
     </head> 
     <body>  
     </body>
    </html>

大家可以自己尝试一下，如果我们return一个false值回去的话，右键菜单将会被阻止弹出。在系统默认事件中return false的话可以有效地阻止该默认事件。当然，阻止右键菜单并不是我们最终的目的，我们最终的目的是为了能弹出自定义右键菜单，我们现在来看一下，如何在屏蔽右键菜单的基础之上，再弹出一个自己的菜单。

<html>
     <head> 
      <meta charset="utf-8" /> 
      <title>无标题文档</title> 
      <style>
    * {margin:0; padding:0; list-style:none;}
    #div1 {position:absolute; width:80px; background:#CCC; border:1px solid black; display:none;}
    </style> 
      <script>
    document.οncοntextmenu=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.οnclick=function ()
    {
    	var oDiv=document.getElementById('div1');
    	oDiv.style.display='none';
    };
    </script> 
     </head> 
     <body> 
      <div id="div1"> 
       <ul> 
        <li>aaa</li>
        <li>bbb</li> 
        <li>ccc</li> 
        <li>ddd</li> 
       </ul> 
      </div>  
     </body>
    </html>

效果如下：

[![d2d59152-14c3-4691-ae7c-468608493a4d.gif][]][d2d59152-14c3-4691-ae7c-468608493a4d.gif]

这个程序里面，我们除了用return false阻止了默认的系统菜单外，还自定义了一个div，其位置为鼠标点击的位置，同时添加了一个点击页面其他位置时，div消失的效果——这样就完成了一个自定义右键菜单。

到目前为止，我们学习了一下阻止默认行为最简单的一种应用。现在我们再来看一个默认行为的另一种应用——大家平时在表单里面会经常需要用户去填一些用户名，密码，邮箱，qq号等信息。当我们输入qq号时，我们希望用户只能输入数字，而不能输入字母和符号，这应该怎么做到呢？这里我们需要使用上节课提过的onkeydown事件。

<html>
     <head> 
      <meta charset="utf-8" /> 
      <title>无标题文档</title> 
      <script>
    window.οnlοad=function ()
    {
    	var oTxt=document.getElementById('txt1');
    	oTxt.οnkeydοwn=function ()
    	{
                   var oEvent=ev||event;
    		//alert(oEvent.keyCode);
    		//0-	48
    		//9-	57
    		//如果 用户按的 不是退格 并且 也不是数字
    if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
    		{
    			return false;
    		}
    	};
    };
    </script> 
     </head> 
     <body> 
      <input type="text" id="txt1" />  
     </body>
    </html>

值得一提的是，如果我们将onkeydown的return值也设为false的话，我们将无法在页面用键盘进行任何输入——实际上键盘输入本身也是系统的一个默认行为，因此可以用return false将它阻止掉。所以其实这个程序的逻辑很简单——通过keyCode判断输入的字符是否为数字，如果不是数字的话，return false阻止其输入即可（注意不要把keyCode为8的退格键阻止掉）。

实际上来说默认行为的各种应用是非常广的，我们这里只举了两个例子，其他的大家可以自己去发掘。

## 拖拽 ##

拖拽的含义大家应该都明白，这里我们先从它的原理开始说起。首先我们先来看一个简单的布局：

<html>
     <head> 
      <meta charset="utf-8" /> 
      <title>无标题文档</title> 
      <style>
    #div1 {width:200px; height:200px; background:red; position:absolute;}
    </style> 
      <script>
    window.οnlοad=function ()
    {
    	var oDiv=document.getElementById('div1');
    	var disX=0;
    	var disY=0;
    	oDiv.οnmοusedοwn=function (ev)
    	{
    		var oEvent=ev||event;
    		disX=oEvent.clientX-oDiv.offsetLeft;
    		disY=oEvent.clientY-oDiv.offsetTop;
    		document.οnmοusemοve=function (ev)
    		{
    			var oEvent=ev||event;
    			oDiv.style.left=oEvent.clientX-disX+'px';
    			oDiv.style.top=oEvent.clientY-disY+'px';
    		};
    		document.οnmοuseup=function ()
    		{
    			document.οnmοusemοve=null;
    			document.οnmοuseup=null;
    		};
                             return false;   //这里是为了阻止火狐浏览器的一个小bug。
    	};
    };
    </script> 
     </head> 
     <body> 
      <div id="div1"></div>  
     </body>
    </html>

大家随便在电脑上拖拽一个东西就可以发现，拖拽的一个性质是：在拖拽时，鼠标和元素右上角的距离是保持不变的。距离的求法也很简单：用鼠标的位置减去元素右上角的位置即可。然后对于拖拽来说，大家可以很容易联想到它涉及到的几个JS事件：鼠标按下，鼠标移动和鼠标抬起。通过这些东西的组合，我们就可以轻松写出一个拖拽了（注意1.onmousemove事件需要添加为在onmousedown事件触发后才会被触发的事件2.onmousemove和onmouseup是添加给document而不是div1的事件，原因在于防止鼠标移出div或屏幕）。

效果如下：

[![b6c68d79-4b96-4620-b787-a9e03b20e710.gif][]][b6c68d79-4b96-4620-b787-a9e03b20e710.gif]

现在我们就拥有了一个没有任何bug的拖拽，但虽然没有程序上的bug，但是有一些用户体验不太好的地方，比如，当用户将拖拽框拖出屏幕后可能就找不到拖拽框了。现在我们要尝试解决这个问题：

<html>
     <head> 
      <meta charset="utf-8" /> 
      <title>无标题文档</title> 
      <style>
    #div1 {width:200px; height:200px; background:red; position:absolute;}
    </style> 
      <script>
    window.οnlοad=function ()
    {
    	var oDiv=document.getElementById('div1');
    	var disX=0;
    	var disY=0;
    	oDiv.οnmοusedοwn=function (ev)
    	{
    		var oEvent=ev||event;
    		disX=oEvent.clientX-oDiv.offsetLeft;
    		disY=oEvent.clientY-oDiv.offsetTop;
    		document.οnmοusemοve=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.οnmοuseup=function ()
    		{
    			document.οnmοusemοve=null;
    			document.οnmοuseup=null;
    	};
    		return false;
    	};
    };
    </script> 
     </head> 
     <body> 
      <div id="div1"></div>   
     </body>
    </html>

我们用l和t来储存div的位置，当二者小于0的时候，将其变为0；当二者大于可视区宽高-元素本身宽高的时候，将其变为可视区宽高-元素本身宽高。这样就完成了一个完美的拖拽。

以上，我们就把拖拽常一些问题简单的讲解一下，后面针对我们还会对拖拽做很多的应用。

[d2d59152-14c3-4691-ae7c-468608493a4d.gif]: /images/20220604/b9dc9898c9554d81bc6b1e084da2421c.png
[b6c68d79-4b96-4620-b787-a9e03b20e710.gif]: /images/20220604/5db24f3bc8264373b4ea78c29422b42f.png