JS 事件类型之鼠标事件

鼠标事件

1 . click 鼠标左键点击 = mousedown + mouseup
2 . mousedown 鼠标左/右键摁下
3 . mouseup 鼠标左/右键松开

document.onmousedown = function(e){
  console.log('mousedown')
}
document.onclick = function(e){
  console.log('click')
}
document.onmouseup = function(){
  console.log('mouseup')
}

鼠标左键触发顺序：鼠标左键摁下 ➡ 鼠标左键松开 ➡ 鼠标左键点击完成 （被监听）

鼠标右键触发顺序：鼠标右键摁下 ➡ 鼠标右键松开 ➡ 鼠标右键点击完成（未被监听）

4 . mousemove 鼠标移动

document.onmousemove = function(e){
  console.log('mousemove')
}

5 . contextmenu 鼠标右键产生菜单事件（默认行为）
唯一的用途就是用于取消鼠标右键产生菜单的默认行为

 document.oncontextmenu = function(e){
  return false;
 }

在页面点击鼠标右键不再弹出菜单

6 .mouseover 鼠标经过
7 .mouseout 鼠标移开

 div.onmouseover = function(e){
  div.style.backgroundColor = 'pink';
 }
 div.onmouseout = function(e){
  div.style.backgroundColor = 'orange'
 }

8 .mouseenter 鼠标进入
9 .mouseleave 鼠标离开

 div.onmouseenter = function(e){
  div.style.backgroundColor = 'pink';
 }
 div.onmouseleave = function(e){
  div.style.backgroundColor = 'orange'
 }

同 mouseover 和 mouseout 的效果相同

能区分鼠标左右键的事件

DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键

鼠标摁下和松开触发事件所产生的事件对象的button属性：
0 – 左键
1 – 中间滚动轮
2 – 右键

 document.onmouseup = function(e){
    console.log(e)
 }

可使用 mousedown 和 mouseup 来判断左右键

 document.onmousedown = function(e){
   if(e.button == 2){
    console.log('right')
  }else if(e.button == 0){
    console.log('left')
  }else{
    console.log('center')
  }
 }

click完全监听不了右键

 document.onclick = function(e){
   console.log(e)
 }

解决mousedown和click的冲突

即 拖拽（触发mousedown…<推拽一段时间>…触发mouseup）不等于点击（触发mousedown➡触发mouseup）
解决思路：时间差

var firstTime = 0; //记录触发mousedown的时间点
var lastTime = 0; //记录触发mouseup的时间点
var flag = false;
document.onmousedown = function(){
  firstTime = new Date().getTime();
}
document.onmouseup = function(){
  lastTime = new Date().getTime();
  if(lastTime - firstTime < 300){ //判断触发mousedown和mouseup之间的时间差
    flag = true;
  }
}
document.onclick = function(){
  if(flag){
    console.log('click');
    flag = false;
  }
}