JS 事件类型之鼠标事件

一、常用鼠标事件

1 . click 鼠标左键点击

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 . contextmenu 鼠标右键产生菜单事件（默认行为）

可用于取消鼠标右键产生菜单的默认行为

 document.oncontextmenu = function(e){
 // 在页面点击鼠标右键不再弹出菜单 
  return false;
 }

5 . mousemove 鼠标移动

document.onmousemove = function(e){
  // 持续触发
  console.log('mousemove')
}

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 的效果相同

二、mouseenter&mouseover 、mouseleave&mouseout的区别

mouseenter、mouseleave 不支持冒泡事件流
mouseover、mouseout 支持冒泡事件流

三、区分鼠标左右键的事件

DOM3标准规定：click事件只能监听左键，无法监听右键的点击，故可通过mousedown和mouseup来判断鼠标键

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

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


示例：

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

四、解决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;
  }
}