事件对象,Music无线遥控器

您也许对Gyration的鼠标有料定的刺探。今后Movea公司决定将尖端的remote-making本事与鼠标整合到一块。在自然的相距内都足以使用的HTPC,被取名称叫Gyration
Air Music Remote。包含一个能从WMP /
iTunes选用音乐的背光LCD显示器;一个援救冠道F /
I大切诺基-躺在床的面上就会输入鼠标命令的位移传感器(最大距离可达100英寸)。贩卖价格为179.99澳元,假若你愿意出229.99法郎,仍是可以够获取四个便携式无线键盘。欢度节日,奖品继续派送中,不可错过

     前几天的话下  拖拽效果,纯手工业。上边会有代码和注释。

一、鼠标事件目的

先是,要想能拖动div就思念到七个事件,鼠标按下  鼠标拖动   鼠标放手。

图片 1

 

鼠标事件对象.png

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
/*给div来些样式 最要害的是绝对定位*/
#dIv{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id=”dIv”></div>
<script>
//获取大家的div
var dIv = document.getElementById(“dIv”);
//鼠标按下 获取event事件
dIv.onmousedown=function(e){
var e = event || window.event;
//dis 指的是鼠标的此时此刻任务 减去 div距离显示屏侧边包车型客车离开
相当于鼠标的任务距离到div左外边框的职分
var dis = e.clientX – dIv.offsetLeft;
//dir 指的是鼠标的此时此刻职分 减去div距离荧屏上方的相距
也正是鼠标的职位距离到div上外国国语高校地框的地方
var dir = e.clientY – dIv.offsetTop;
//鼠标移动事件
document.onmousemove=function(e){
var e = event || window.event;
//l 就是div要左右活动的离开 拖动时鼠标的职分减去 dis
var l = e.clientX-dis;
//x 正是div要上下活动的离开 拖动时鼠标的岗位减去 dir
var x = e.clientY-dir;
dIv.style.left=l+”px”;
dIv.style.top=x+”px”;
//鼠标松手事件 鼠标甩手时
document.onmouseup=function(){
//把鼠标按下事件 和移动事件 清除 为零
document.onmousedown=null;
document.onmousemove=null;
}
}
}
</script>
</body>
</html>

target:触发了事件的因素,触发事件的要素不自然是绑定事件的要素
offsetY:鼠标距离自个儿的Y轴的离开(相对于target的偏离)
clientY:鼠标距离窗口的地方
pageY:鼠标距离html页面包车型地铁偏离

勤学苦练1:div跟随鼠标移动(假如div相对于父级box定位)

    document.onmousemove=function(ev){
          var ev = window.event||ev;
          var x =ev.clientX-100;//减掉div一半的宽,鼠标就会在div的正中间
          var y = ev.clientY-100;
          div.style.left = x + "px";
          div.style.top = y + "px"
      }

勤学苦练2:鼠标拖拽

  var blueDiv =document.getElementsByClassName("blueDiv")[0];
  blueDiv.onmousedown =function(ev){
        var ev = window.event||ev;
  //把鼠标(0,0)点定在blueDiv的左上角,鼠标在blueDiv
        var startX = ev.clientX-blueDiv.offsetLeft;
        var startY = ev.clientY-blueDiv.offsetTop;
      document.onmousemove=function(ev){
          var ev = window.event||ev;
          var x =ev.clientX-startX;//减去鼠标相对于div的距离,相当于div的相对于鼠标位置,向左移动了startX的距离,startY同理
          var y = ev.clientY-startY;
          blueDiv.style.left = x + "px";
          blueDiv.style.top = y + "px"
      }
  }
  blueDiv.onmouseup=function(){
    document.onmousemove=null;
  }

勤学苦练3:升级版,给body加两千的height,让div跟随鼠标移动,且无法超过box

  div.onmousedown=function(ev){
        获取鼠标相对于div的距离
        var offsetX = ev.offsetX;
        var offsetY = ev.offsetY;
      document.onmousemove=function(){
           var ev =window.event||ev;
           var x = ev.clientX-box.offsetLeft-offsetX-8;
           var y = ev.pageY-box.offsetTop-offsetY-8;

           if(x<0){
                x=0;
           }else if(y<0){
                 y=0;
           }
           if(x>box.offsetWidth-div.offsetWidth){
                x = box.offsetWidth-div.offsetWidth;
           }else if(y>box.offsetHeight-div.offsetHeight){
                y = box.offsetHeight-div.offsetHeight;
           }

           div.style.left = x+"px";
           div.style.top = y+"px";
      }
  }
  思路:根据鼠标位置计算div的top,left值
  获取鼠标的位置,用鼠标的位置的x和y 的值-父级box的offsetLeft-鼠标相对于div的offseX-8个像素的margin,就是div的left和top值

鼠标单击和双击
bug:点击一个双击会试行四遍单击,
化解:点击双击未来让单击延迟施行

  var timer ;
  redDiv.onclick=function(){
          clearTimeout(timer);
          timer = setTimeout(function(){
                 console.log("单击")          
          },300)
  }
  redDiv.ondblclick=function(){
          clearTimeoutl(timer)//清除的是双击中的第二次,第一次已经在单击事件中清除,第二次的时候已经清除了定时器就不会打印
          console.log("双击");
  }
  点击双击,产生的第一次单击会300ms之后打印,第二次也会在300ms后打印,由于手速够快,所以两次单击执行给人感觉是瞬间执行
所以要在单击事件中先清除上一次的单击定时器,如果没按双击,清除的就是空的定时器,不影 响代码执行,如果按了双击,肯定是触发了双击事件,上一次的单击已经在单击事件中清除,再在双击事件中把第二次的定时器清除

二、键盘事件
(1)keydown支持特别开关(command,shift),keydown下keyCode所代表的开关不区分轻重缓急写
(2)keypress不帮忙特别开关,且keypress下keyCode区分轻重缓急写

看清是不是按下组合键

if(ev.keyCode==67&&ev.metaKey){
    console.log("按了command+c");
}

(3)方向键调控div移动:上38 下40 左37 右39

练习:
var boolArr =[false,false,false,false];
document.onkeydown=function(ev){
    var evObj=window.event||ev;
    boolArr[ev.keyCode-37]=true;
}
document.onkeyup=function(ev){
    var evObj=window.event||ev;
    boolArr[ev.keyCode-37]=false;
}
setInterval(function(){
    var speed =5;
    var leftSpeed = boolArr[0]*-speed+boolArr[2]*speed;
    var topSpeed = boolArr[1]*-speed+boolArr[3]*speed;
    redDiv.style.left=redDiv.offsetLeft+leftSpeed+"px";
    redDiv.style.top=redDiv.offsetTop+topSpeed+"px";
},10)
设置布尔值:键盘按下的时候根据上下左右的值-37计算出boolArr的下标取到数组元素,按到之后把原本的false变为true;
定时器中也是根据计算的值判断是加还是减

相关文章