鼠标事件

鼠标事件

鼠标事件有很多：click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout。这些方法的语义化都很好，大家看名字基本都懂是什么意思。

其中，contextmenu是右键出现菜单事件，并不是右键事件。

click是一个完整的点击事件，包括mousedown和mouseup。

mouseover和mouseout是一组事件，对应于鼠标的移入移出事件。

• 所有的鼠标事件都有clientX和clientY，代表的是鼠标点击的位置，我们可以通过e.clientX和e.clentY来查看。

• 左键点击的顺序是：mousedown、mouseup、click

var firstTime,lastTime,flag = false;
 document.onclick = function (e) {
      console.log(‘click’);
  }
  document.onmousedown = function (e) {
      console.log(‘mousedown’);
 }
  document.onmouseup = function (e) {
     console.log(‘mouseup’);
 }

输出的结果是mousedown、mouseup、click。

• 当我们同时绑定了click事件和mousedown事件后，如何解决mousedown和click的冲突问题？

其实方法很简单，我们可以通过按下鼠标的事件来判断是执行click还是mousedown事件。

var firstTime,lastTime,flag = false;
  document.onclick = function (e) {
      if (flag) {
          console.log(‘click’);
      }else {
          console.log(‘mousedown’);
      }
  }
  document.onmousedown = function (e) {
      firstTime = new Date().getTime();
  }
  document.onmouseup = function (e) {
      lastTime = new Date().getTime();
      if (lastTime - firstTime < 200) {
         flag = true;
      }else {
          flag = false;
      }
  }

• 如何判断鼠标点击的是左键还是右键？

click事件永远都是左键，有左键和右键的区别的是mousedown事件。

再mousedown的事件对象中有一个属性叫做button，这个属性的值是0的时候代表我们按下的是左键，1的时候代表按下的中键，2的时候代表按下的是右键。

 document.onmousedown = function (e) {
     if (e.button == 0) {
         console.log(‘left’);
      }else if (e.button == 1) {
          console.log(‘mid’);
      }else {
         console.log(‘right’);
      }
  }

这里我们就可以重新回顾一下拖拽事件了：

var div = document.getElementsByTagName(‘div’)[0]
  function drag(elem) {
      var disX,dixY;
    addEvent(elem, ‘mousedown’, function (e) {
          var event = e || window.event;
          disX = event.clientX - parseInt(getStyle(elem, ‘left’));
          disY = event.clientY - parseInt(getStyle(elem, ‘top’));
          addEvent(document, ‘mousemove’, mouseMove);
          addEvent(document, ‘mouseup’, mouseUp);
          stopBubble(e);
          cancelHandler(e);
      });
   
      function mouseMove(e) {
          var event = e || window.event;
          elem.style.left = event.clientX - disX + ‘px’;
          elem.style.top = event.clientY - disY + ‘px’;
     }
      function mouseUp (e) {
          removeEvent(document, ‘mousemove’, mouseMove);
          removeEvent(document, ‘mouseup’, arguments.callee);
     }
 }

• 针对鼠标帧频过快的问题，IE中有一个也可以说是另一种事件捕获的方法——domEle.setCapture()。

调用这个方法之后，页面后续的所有操作就会全部都归于这个domEle上，比如div有一个拖拽事件，不过mousemove绑定在div上，只要调用了这个方法，当鼠标拖拽过程中鼠标移出了div，这个时候有效的鼠标移动就变成了document上的mousemove事件了，但是它还是归于了div上，因此div还是可以跟着鼠标移动。

同时还有一个domEle.releaseCapture()方法可以来释放这个捕获行为。