ITPub博客

首页 > 应用开发 > Javascript > JavaScript和JQuery的鼠标mouse事件冒泡处理

JavaScript和JQuery的鼠标mouse事件冒泡处理

Javascript 作者:太阳是我啃圆的 时间:2021-01-27 15:52:41 0 删除 编辑

 这篇文章主要介绍了JavaScript和JQuery的 鼠标mouse事件冒泡处理,本文总结出了mouse事件的一些定论,并分别给出了JavaScript和JQuery测试代码,需要的朋友可以参考下

  简单的鼠标移动事件:

  进入

  代码如下:

  mouseenter:不冒泡

  mouseover: 冒泡

  不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件

  只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件

  移出

   代码如下:

  mouseleave: 不冒泡

  mouseout:冒泡

  不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件

  只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件

  我们通过一个案例观察下问题:

  给一个嵌套的层级绑定mouseout事件,会发现mouseout事件与想象的不一样

   代码如下:

  

外部子元素

内部子元素

0

 

  

0

 

  

 

  我们发现一个问题mouseout事件:

  1.无法阻止冒泡

  2.在内部的子元素上也会触发

  同样的问题还有mouseover事件,那么在stopPropagation方法失效的情况下我们要如何停止冒泡呢?

  1.为了阻止mouseover和mouseout的反复触发,这里要用到event对象的一个属性relatedTarget,这个属性就是用来判断 mouseover和mouseout事件目标节点的相关节点的属性。简单的来说就是当触发mouseover事件时,relatedTarget属性代表的就是鼠标刚刚离开的那个节点,当触发mouseout事件时它代表的是鼠标移向的那个对象。由于MSIE不支持这个属性,不过它有代替的属性,分别是 fromElement 和toElement。

  2.有了这个属性,我们就能够清楚的知道我们的鼠标是从哪个对象移过来,又是要移动到哪里去了。这样我们就能够通过判断这个相关联的对象是否在我们要触发事件的对象的内部,或者是不是就是这个对象本身。通过这个判断我们就能够合理的选择是否真的要触发事件。

  3.这里我们还用到了一个用于检查一个对象是否包含在另外一个对象中的方法,contains方法。MSIE和FireFox分别提供了检查的方法,这里封装了一个函数。

  jQuery的处理也是如出一辙

  复制代码 代码如下:

  jQuery.each({

  mouseenter: "mouseover",

  mouseleave: "mouseout",

  pointerenter: "pointerover",

  pointerleave: "pointerout"

  }, function(orig, fix) {

  jQuery.event.special[orig] = {

  delegateType: fix,

  bindType: fix,

  handle: function(event) {

  var ret,

  target = this,

  related = event.relatedTarget,

  handleObj = event.handleObj;

  // For mousenter/leave call the handler if related is outside the target.

  // NB: No relatedTarget if the mouse left/entered the browser window

  if (!related || (related !== target && !jQuery.contains(target, related))) {

  event.type = handleObj.origType;

  ret = handleObj.handler.apply(this, arguments);

  event.type = fix;

  }

  return ret;

  }

  };

  });



来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69993754/viewspace-2753761/,如需转载,请注明出处,否则将追究法律责任。

下一篇: 没有了~
请登录后发表评论 登录
全部评论

注册时间:2021-01-22

  • 博文量
    13
  • 访问量
    5581