JS事件学习 拖拽，鼠标键盘事件实例汇总

  • event对象：事件对象，应用在IE6-8及高版本的chrome浏览器，在低版本的chrome浏览器及Firefox中需要用到一个参数：ev，在调用函数时，系统就将这个参数传给函数；为了解决这个兼容问题，可以用一个“或”的表达式，例如：var oEvent=event||ev;，然后调用的时候，直接用oEvent就好了；
  • document：包含整个页面的内容，上至<!DOCTYPE html>，下至;如果需要给整个页面加点击事件，应该加在document上而不是body上，因为body的范围由它所包含的内容决定；
  • 事件流：最简单的一个事件流的例子——事件冒泡（一般会带来一些困扰，所以很多时候需要取消冒泡：通过事件对象来解决——oEvent.cancelBubble=true;，典型的例子为仿select下拉框）；
  • 鼠标事件：鼠标坐标，clientX及clientY(表示的是可视区的坐标，所有如果有滚动的时候需要加上scrollTop和scrollLeft)；
  • keyCode：表示键盘上按键的键码，按键事件为onkeydown及onkeyup；（按键卡顿现象：照顾特殊人群，但是会造成不好的影响，解决方案为将事件加上setInterval函数来将延迟给掩饰掉，按键抬起时清除定时器）；
  • 其他属性：ctrlKey，shiftKey、altKey，使用的时候都需要结合事件对象，例如：oEvent.ctrlKey；

示例代码 1：

知识点：事件的兼容性判断，split（），鼠标和键盘事件的使用，clientX,clientY鼠标移动时获取鼠标的位置

（要求）

  1. 在输入框中输入任意字符；
  2. 鼠标点击enter或者直接用键盘enter；
  3. 移动鼠标就能按到效果，输入的字符越多，效果越明显；
  4. 如果未输入任何字符，那么将会提示输入；

编写思路： 获取输入的内容，分割成一个一个DIV插入到页面中，每个Div按鼠标位置进行排列。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
* {
margin: 0;
padding: 0;
}
#playbord div {
float: left;
position: absolute;
20px;
height: 20px;
}
#playbord {
position: fixed;
left: 10px;
top: 10px;
}
#enter {
230px;
margin: 60px auto;
}
</style>
</head>
<body>
<div id='enter'>
<input id='input' type="text" placeholder="Enter your telephone number or your QQ" />
<input id='btn' type='button' value="Enter" />
</div>
<div id='playbord'></div>
<script>
window.onload=function (ev){
var oInp=document.getElementById('input');
var oBtn=document.getElementById('btn');
var oPlay=document.getElementById('playbord');
var aRus=[];

function tab(ev){
aRus=oInp.value.split('');

if(aRus.length>0){
for(var i=0;i<aRus.length;i++){
var oDiv=document.createElement('div');
oDiv.innerHTML=aRus[i]+' ';
oPlay.appendChild(oDiv);

};
document.onmousemove=function (ev){
var oEvent=event||ev;
var aDiv=oPlay.children;
for(var i=aDiv.length-1;i>0;i--){
aDiv[i].style.left=aDiv[i-1].offsetLeft+15+'px';
aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
}

aDiv[0].style.left=oEvent.clientX+'px';
aDiv[0].style.top=oEvent.clientY+'px';
}
}
else {
alert('Please Enter Something First~')
}

};

oBtn.onclick=function (){
tab(ev);
};

document.onkeydown=function (ev){
var oEvent=event||ev;
if(oEvent.keyCode==13){
tab(ev);
};
};

}
</script>
</body>
</html>

　　示例代码 2：

拖拽：保证鼠标的位置及被拖动元素的相对位置不变，需要注意的点如下：

  1. 应该是只有杂鼠标按下之后才能移动，鼠标抬起时移动停止；
  2. 对于鼠标快速移动时可能移出元素范围带来的移动异常，将移动事件加在document上即可解决；
  3. 当移动出视窗时释放鼠标按键，仍然能够移动，为了解决这个问题，需要将鼠标释放按钮事件也加在document上；
  4. 在Firefox中拖拽空元素的时候会出现重影，这也是FF中的一种默认事件，可以用返回false的方法来组织这个bug；
  5. 被拖拽元素被拖出视窗范围，这时候就可以判断来阻止元素被拖出视窗；
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
    <title>demo</title>
    <style>
    * {
        margin: 0;
        padding: 0;
        }
        #move {
             100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
    <body>
       <div id='move'></div>
<script>
   window.onload=function (){
  var oDiv=document.getElementById('move');
       oDiv.onmousedown=function(ev){
           var oEvent = event || ev ;
           var disX=oEvent.clientX-oDiv.offsetLeft;
           var disY=oEvent.clientY-oDiv.offsetTop;
           
           document.onmousemove=function(ev){
               var oEvent = event || ev ;
               var h=oEvent.clientX-disX;
               var v=oEvent.clientY-disY;
               
               if(h<0){
                   h=0;
               }
               else if(h>document.documentElement.clientWidth-oDiv.offsetWidth){
                   h=document.documentElement.clientWidth-oDiv.offsetWidth;
               };
               
               if(v<0){
                   v=0;
               }
               else if(v>document.documentElement.clientHeight-oDiv.offsetHeight){
                   v=document.documentElement.clientHeight-oDiv.offsetHeight;
               };
               
               oDiv.style.left=h+'px';
               oDiv.style.top=v+'px';
           };
           
        document.onmouseup=function(){
            document.onmousemove=null;
           
        };
           return false;
       }
}
</script>
    </body>
</html>

　　练习实例 3：

　　关键词：带框拖拽、自定义滚动条

  • 带框拖拽：预先设置一个样式，按下鼠标产生一个div并赋予样式，div的大小与框相同，位置与框相同，移动时只移动框，松开鼠标时才移动框，并且将产生的div移出；
  • 自定义滚动条：控制对象的大小、透明度、文字滚动等；

    知识点思路总结：带框主要是构建一个新的div来实现，新的div要和拖拽目标大小一样，拖拽的时候拖拽的是带边框的div，鼠标抬起后移除带框div，写入原div。  

制作过程中出现了一些问题，比如offsetleft是相对于父容器来计算的，因此控制按钮拖拽的计算方法上和拖拽以body为父元素的div是差不多的。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
    <title>demo</title>
    <style>
    #bar {
   600px;
  height: 20px;
  position: relative;
  margin: 20px auto;
  background: rgb(255, 234, 234);
}
#control {
   20px;
  height: 20px;
  position: absolute;
  background: rgb(255, 0, 0);
}
.frame {
  border: 1px dashed blue;
  position: absolute;
}
#box {
  position: absolute;
  background: rgb(12, 234, 0);
   0;
  height: 0;
}
    </style>
</head>
    <body>
       <div id='bar'>
  <div id='control'></div>
</div>
<div id='box'></div>
<script>
  window.onload=function(){
     var oBar=document.getElementById('bar');
     var oControl=document.getElementById('control');
     var oBox=document.getElementById('box');
      oControl.onmousedown=function(ev){
          var oEvent=event ||ev;
          var disX=oEvent.clientX-oControl.offsetLeft;
          var scale=1/(oBar.offsetWidth-oControl.offsetWidth);
          document.onmousemove=function(ev){
              var oEvent=event ||ev;
              var h=oEvent.clientX-disX;
          if(h<0){
             h=0
          }
          else if(h>oBar.offsetWidth-oControl.offsetWidth){
              h=oBar.offsetWidth-oControl.offsetWidth;
          };
                  oControl.style.left=h+'px';
              oBox.style.width=oControl.offsetLeft*scale*300+'px';
      oBox.style.height=oControl.offsetLeft*scale*300+'px';
      }
          document.onmouseup=function(){
              document.onmousemove=null;
          };
          return false;
      };
      oBox.onmousedown=function(ev){
          var oEvent=event||ev;
    var disX=oEvent.clientX-oBox.offsetLeft;
    var disY=oEvent.clientY-oBox.offsetTop;
          var oFrame=document.createElement('div');
           oFrame.style.width=oBox.offsetWidth-2+'px';
    oFrame.style.height=oBox.offsetHeight-2+'px';
    oFrame.style.left=oBox.offsetLeft+'px';
    oFrame.style.top=oBox.offsetTop+'px';
          oFrame.className='frame';
          document.body.appendChild(oFrame);
          
          document.onmousemove=function(ev){
              var oEvent= event || ev ;
              var h=oEvent.clientX-disX;
              var v=oEvent.clientY-disY;
              
              if(h<0){
                  h=0;
              }
              else if(h>document.documentElement.clientWidth-oFrame.offsetWidth){
        h=document.documentElement.clientWidth-oFrame.offsetWidth;
      };
              if(v<0){
        v=0;
      }
      else if(v>document.documentElement.clientHeight-oFrame.offsetHeight){
        v=document.documentElement.clientHeight-oFrame.offsetHeight;
      };
              oFrame.style.left=h+'px';
              oFrame.style.top=v+'px';
          };
          document.onmouseup=function(){
              document.onmousemove=null;
              document.onmouseup=null;
              
              oBox.style.left=oFrame.offsetLeft+'px';
      oBox.style.top=oFrame.offsetTop+'px';
      document.body.removeChild(oFrame);
          };
          return false;
      }
  }
</script>
    </body>
</html>

　　练习实例 4：

   QQ登陆面板。 主要知识点总结： 考虑兼容性，getClassName方法的封装。 时间冒泡和时间默认行为不同浏览器阻止方法的兼容，更换classname来达到变换div，span的目的，

合理利用事件冒泡。代码会贴codepen的链接。

   练习实例 5：

　　抽奖系统。键盘事件

　　主要知识点记录：  keyDown 用户按下任意键时触发，如果按住不放会重复触发。keyPress 按字符键时触发。 keyUp 用户释放键盘上的键时触发。  keyCode属性确定按了什么键。

立一个flag来做状态标志，方便切换状态。随机数的用法，Math floor和Math random。

　　

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
    <title>demo</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #gift{
             200px;
            height: :60px;
            margin: 0 auto;
            padding-top: 30px;
            font-size: 24px;
            font-weight: bold;
            line-height: 24px;
            color:red;
            text-align: center;
        }
        .btn {
            190px;
            margin: 30px auto; 
        }
        .btn span {
            display: inline-block;
            margin-left: 20px;
            50px;
            height:30px;
            background: #036;
            border-radius: 7px;
            text-align: center;
            font-size:16px;
            line-height:30px;
            color: aliceblue;
            cursor: pointer;
        }
    </style>
</head>
    <body>
        <div id="gift">
            点击开始抽奖！
        </div>
        
        <div class="btn">
            <span id="start">开始</span>
            <span id="stop">停止</span>
        </div>
<script>
    window.onload=function(){
        var giftList=["100元","iphone","ipad2","watch","小汽车","谢谢惠顾"];
        var gift=document.getElementById('gift');
        var btn1=document.getElementById('start');
        var btn2=document.getElementById('stop');
        var time=null;
        var flag=0;
        btn1.onclick=goGift;
        btn2.onclick=stopGift;
       document.onkeyup=function(e){
           e= e ||window.event;
           if(e.keyCode==13){
               if(flag==0){
                   goGift();
                   flag=1;
               }
               else{
                   stopGift();
                   flag=0;
               }
           }
       }     
            
       function goGift(){
           btn1.style.background='gray';
            clearInterval(time);
             time=setInterval(function(){
                var context=giftList[Math.floor(Math.random()*giftList.length)];
                gift.innerHTML=context;
            },30);
       }     
        function stopGift(){
            btn1.style.background='#036';
            clearInterval(time);
        }
    }
</script>
    </body>
</html>

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/oldchicken/p/6429159.html