Javaｓｃｒｉｐｔ和jQuery的鼠标鼠标事件冒泡处理

简单鼠标移动事件：

进入

复制代码代码如下所示：

Mouseenter：没有泡沫

鼠标悬停：泡沫
鼠标指针是否经过选择的元素或子元素，它触发mouseover事件

的MouseEnter事件触发鼠标指针经过选择的元素只有

删除

复制代码代码如下所示：

Mouseleave：没有泡沫了

Mouseout：鼓泡
无论是鼠标指针离开选定的元素或子元素，它会触发mouseout事件

MouseLeave事件触发的只有当鼠标指针离开选定的元素

我们通过一个案例看一个案例：

一个嵌套的层次结合mouseout事件会发现mouseout事件不同于想象

复制代码代码如下所示：

内部的子元素的子元素0外

零
var I＝0；

var = 0；

document.queryselectorall（' '）{ 0 }。addEventListener（'mouseout功能（e）{）

document.queryselectorall（#银秀）{ 0 }。内容=（+ +我）

e.stoppropagation（）；

}，假）

document.queryselectorall（'，'）{ 0 }。addEventListener（'mouseout，函数（）{（）{

document.queryselectorall（# outshow ）{ 0 }。内容=（+ + K）

}，假）
我们发现一个问题mouseout事件：

1。鼓不住

2。也可以在内部的子元素触发

同样的问题是mouseover事件，那么我们该如何阻止泡沫在里面的方法失败了呢

1，为了防止重复触发mouseover和mouseout，我们需要使用事件对象的一个属性relatedtarget，这是用来确定对mouseover和mouseout事件节点相关的节点的属性。简单地说，当触发mouseover事件，relatedtarget代表节点的属性，只是左鼠标。当触发mouseout事件，它代表鼠标移动到对象。因为这个值不支持这个属性，它有一个替代的属性，fromelement和toelement，分别。

2。有了这个属性，我们就可以清楚地知道我们的鼠标从哪个位置移动到哪个位置，通过这种方式，我们能够判断关联对象是否在我们想要触发的对象的内部，或者是对象本身，通过这个判断，我们可以合理地选择它是否真的需要触发事件。

三.在这里我们也用一种方法来检查一个对象是否包含在另一个对象，包含method.msie和Firefox提供的检查方法，它封装了一个函数。

jQuery的处理也是一样的。

复制代码代码如下所示：

jquery.each（{

Mouseenter：鼠标悬停

MouseLeave：mouseout

pointerenter：pointerover

pointerleave：pointerout

}，功能（1，固定）{

jquery事件。特殊{ } = { { orig

DelegateType：修复，

BindType：修复，

句柄：函数（事件）{

VaR RET，

目标=此，

event.relatedtarget相关=，

handleobj = event.handleobj；

对于mousenter / /离开调用处理程序，如果相关以外的目标。

注：如果没有relatedtarget鼠标/离开/进入浏览器窗口

如果（相关| |！（相关！=目标！jquery.contains（目标、相关）））{

event.type = handleobj.origtype；

ret = handleobj.handler.apply（这个参数）；

event.type =固定；

}

返回页首；

}

}；

}）；