欢迎光临
我们一直在努力

JavaScript | 鼠标事件与执行顺序

鼠标事件共有10类,下面把它们先列举出来:

  • click:当用户按下并释放鼠标按键或其他方式“激活元素”时触发
  • contextmenu:可以取消的事件,当上下文菜单即将出现时触发。当前浏览器在鼠标右击时显示上下文菜单
  • dbclick:当用户双击鼠标时触发
  • mousedown:当用户按下鼠标按钮时触发
  • mouseup:当用户释放鼠标按键时触发
  • mouseover:当鼠标进入元素时触发,会冒泡
  • mouseout:当鼠标离开元素时触发,会冒泡
  • mouseenter:当鼠标进入元素时触发,不会冒泡
  • mouseleave:当鼠标离开元素时触发,不会冒泡

冒泡

页面上的所有元素都支持鼠标事件,除了mouseenter和mouseleave时间外,所有的鼠标事件都会冒泡。(safar浏览器不支持mouseenter和mouseleave事件)。

下面为父元素创建添加了一个监听事件,会冒泡。当进入父元素时,输出mouseover,当从父元素进入子元素时,会输出mouseout和mouseover(先出后进)。原因是由于冒泡导致子元素也存在监听事件。

<body>
<div id="dad" style="width: 400px;height: 400px;background-color: red;">
<div id="son" style="width: 200px;height: 200px;background-color: blue;">
</div>
</div>
<script>
document.getElementById("dad");
document.getElementById("son");
dad.addEventListener("mouseover",mouseHandler);
dad.addEventListener("mouseout",mouseHandler)
function mouseHandler(e){ 
console.log(e.type)
}
</script>
</body>

提示:如果把鼠标事件改为mouseenter和mouseleave,此时进入子元素将不会进行任何输出,原因是这两个鼠标事件不会冒泡。

顺序

鼠标移动时

  • 鼠标移入时,依次会触发mouseover、mouseenter、多次mousemove事件
  • 鼠标移入时,IE依次会触发mouseover、mousemove、mouseenter、多次mousemove事件
  • 鼠标移出时,依次会触发mousemove、mouseout、mouseleave事件

鼠标双击时

  • 执行顺序:mousedown、mouseup、click、mousedown、mouseup、click、dbclick
  • IE8-浏览器存在bug,双击时,会跳过第二个mousedown和click事件

单击鼠标右键

  • 执行顺序:mousedown、mouseup、contextmenu
  • Safari浏览器存在bug,单击右键时不会触发mouseup事件

嵌套元素移入移出时(如文章第一个例子)

  • 父级进入子级:父级的mouseout、子级的mouseover、父级的mouseover、子级的mouseenter
  • 子级进入父级:子级的mouseout、父级的mouseout、子级的mouseleave、父级的mouseover

赞(0) 打赏
未经允许不得转载:散人研 » JavaScript | 鼠标事件与执行顺序
分享到: 更多 (0)

评论 抢沙发

3 + 5 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏