offsetX 兼容及事件冒泡

2012 - 9 - 9 作者 : Jimco 分类 : JavaScript

       制作一个效果,根据鼠标在当前元素中的位置,利用 mousemove 事件使鼠标在图片左右时改变样式。引出几个问题:offsetX 兼容、target 和 currentTarget、事件冒泡。

点击查看原图

       1、关于 offsetX 兼容

       offsetX : 发生事件的地点在事件源元素的坐标系统中的 x 坐标. 因为 FF 不兼容这个属性,所以我们只得曲线救国了。具体实现代码如下:

// 针对火狐不支持offsetX/Y
function getOffset(e){
  var target = e.target, // 当前触发的目标对象
      eventCoord,
      pageCoord,
      offsetCoord;

  // 计算当前触发元素到文档的距离
  pageCoord = getPageCoord(target);

  // 计算光标到文档的距离
  eventCoord = {
    X : window.pageXOffset + e.clientX,
    Y : window.pageYOffset + e.clientY
  };

  // 相减获取光标到第一个定位的父元素的坐标
  offsetCoord = {
    X : eventCoord.X - pageCoord.X,
    Y : eventCoord.Y - pageCoord.Y
  };
  return offsetCoord;
}

function getPageCoord(element){
  var coord = { X : 0, Y : 0 };
  // 计算从当前触发元素到根节点为止,
  // 各级 offsetParent 元素的 offsetLeft 或 offsetTop 值之和
  while (element){
    coord.X += element.offsetLeft;
    coord.Y += element.offsetTop;
    element = element.offsetParent;
  }
  return coord;
}

 

       2、关于 event.currentTarget 和 event.target

       currentTarget : 返回其事件监听器触发该事件的元素

       target : 返回触发事件的元素

       所以我们可以通过比较 event.target 与 this 来确定事件是不是由于冒泡而触发的。

 

       3、关于事件冒泡

       我用一个 div 包住 img, 然后在 div 上触发 mousemove 事件,当鼠标移至 img 上时 event.target 指向 img, 也就是说 div 的子元素同样触发了 mousemove 事件(PS:这和不久前碰到的 IE 下子元素触发 mouseover、mouseout 事件如出一辙。当时的解决方案是改用 mouseenter、mouseleave 或者 setTimeout、clearTimeout 控制)。回到 mousemove, 来看看我的解决方案:

$(".wrap_1").mousemove(function(evt){
  var me = $(this),
    //根据触发事件元素调整 width
    width = $(evt.target).width(),
    posX = (evt.offsetX == undefined) ? getOffset(evt).offsetX : evt.offsetX;
    if( posX < width/2 ){
      me.removeClass("imgNext");
      me.addClass("imgPrev");
    }else{
      me.removeClass("imgPrev");
      me.addClass("imgNext");
    }
});


查看效果

 

 

10058 人围观 / 2 条评论 ↓快速评论↓

  • 头像和冒泡有什么关系啊。。。。。。。阿狸14

    2012-10-07 16:59 回复

    • @崔:头像?没明白~~~~~~~~~~

      Jimco 2012-10-07 19:41 回复

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18

Powered by Jimco

©2013 前端那些事儿 Designed by Jimco

About me|意见反馈