您的位置：首页 > 其它

浏览器事件之鼠标事件

2016-07-21 02:09 211 查看

鼠标事件分为按下鼠标mousedown，放开鼠标mouseup，移动鼠标，鼠标移入（2种:mouseenter,mouseover），鼠标移出（2种:mouseleave,mouseout）

按下鼠标时只会触发一次鼠标事件而不是一直触发，放开鼠标也是，但是移动鼠标，鼠标移动事件会一直触发。如果给A元素绑定了mouseenter或者mouseleave，那么鼠标在进入移出该元素的最大范围时会触发相应的事件，这两个事件是针对A元素的最大范围进行触发的，因为这两个事件是不冒泡的，所以鼠标进入或移出A元素的子元素时，只会触发该子元素enter或者leave事件，而不是冒泡到父元素A。而mouseover和mouseout则不是，当鼠标进入或者移出到A元素的每一个子元素时，相应的事件都会冒泡到父元素A，从而触发A元素的相关事件。

有兴趣可以执行下面的代码进行查看效果。mouseover和mouseout

<!DOCTYPE html>

<html>

<head>

</head>

<body >

<div style="padding:100px;border:1px red solid" id="c">

<div style="padding:50px;border:1px red solid" id="d">

<div style="padding:25px;border:1px red solid" id="e">

1111111

</div>

</div>

</div>

<script type="text/javascript">

document.getElementById("c").onmouseout=function(e){

console.log("c:onmouseout",e.target)

}

document.getElementById("c").onmouseover=function(e){

console.log("c:onmouseover",e.target)

}

document.getElementById("d").onmouseout=function(e){

console.log("d:onmouseout",e.target)

}

document.getElementById("d").onmouseover=function(e){

console.log("d:onmouseover",e.target)

}

document.getElementById("e").onmouseout=function(e){

console.log("e:onmouseout",e.target)

}

document.getElementById("e").onmouseover=function(e){

console.log("e:onmouseover",e.target)

}

</script>

</html>

mouseenter和mouseleave：

<!DOCTYPE html>

<html>

<head>

</head>

<body >

<div style="padding:100px;border:1px red solid" id="c">

<div style="padding:50px;border:1px red solid" id="d">

<div style="padding:25px;border:1px red solid" id="e">

1111111

</div>

</div>

</div>

<script type="text/javascript">

document.getElementById("c").onmouseenter=function(e){

console.log("c:onmouseenter",e.target)

}

document.getElementById("c").onmouseleave=function(e){

console.log("c:onmouseleave",e.target)

}

document.getElementById("d").onmouseenter=function(e){

console.log("d:onmouseenter",e.target)

}

document.getElementById("d").onmouseleave=function(e){

console.log("d:onmouseleave",e.target)

}

document.getElementById("e").onmouseenter=function(e){

console.log("e:onmouseenter",e.target)

}

document.getElementById("e").onmouseleave=function(e){

console.log("e:onmouseleave",e.target)

}

</script>

</html>

mouseenter,mouseleave系和mouseover,mouseout系的区别不仅在于冒泡，还在于作用范围，假设A元素绑定了以上的事件，对于前者系的事件，A的事件触发范围是整个A元素(包括子元素)大小，对于后者系的事件，A的触发范围是A的大小减去最近子元素的大小。即减去挖去的部分，也就是说从里外走移动鼠标的时候，进入或者离开这个范围都会触发A的over和out事件。但不会触发enter和leave事件。A的子元素触发enter，leave事件时不会冒泡到A，但是A可以在捕获阶段进行劫持。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航