加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

解决IE下重叠div对mouseover事件的穿透方法之

(2012-08-24 17:13:30)
标签:

杂谈

分类: javascript

     历经一天半的时间,我这前端的白痴终于想到了一个解决IE 下重叠div  对 mouseover 事件的穿透方法

 

 

现象: 两个并列关系的Div(没有父子关系),但是两个Div在位置上面有重叠,当鼠标在两个div重叠部分的时候,会触发下层div的mouseover事件(IE),从而触发上层div 的mouseleave事件。

 

 

        注意:两个div没有父子关系,所以我没有在事件冒泡上面进行探索,我对各种浏览器事件冒泡也不是很精通,想学习的童鞋可以上网查一下,这方面资料相当的多。

 

        探索的过程放到后面,先把最后的解决方便告诉大家,其实很简单,就是在上层div的mouseleave事件中进行判断,如果鼠标还在上层div中 就执行上层divmouseleave中的逻辑,不执行下层div的mouseenter逻辑(未实现)。

 

 

this._ul.mouseenter(function(e){//JS里面访问 类成员方法必须 使用thisthat._open(jq(this));e.stopPropagation();}).mouseleave(function(e){//为了防止IE下 div重叠时候对鼠标事件的穿透(非冒泡)//判断 鼠标不在ul中的时候才隐藏排序列表var temp=jq(this);var temp_left=temp.offset().left;var temp_width =temp.width();var temp_top=temp.offset().top;var temp_height=temp.height();var _dir_x = (e.clientX>temp_left)&&(e.clientX<temp_left+temp_width);var _dir_y = (e.clientY>temp_top)&&(e.clientY<temp_top+temp_height);if(!_dir_x || !_dir_y){that._close(jq(this));}e.stopPropagation();});

 

1.html 强制 ie8兼容性视图

 

2.mouseover  mouseEnter 区别 是否冒泡

 

3.Z-index 仅能在定位元素上奏效(例如 position:absolute;)! z-index=-1;

 

4.Bug  本来是想选择排序的  结果 点到了   “全市分店”上面  IE6,IE8

 

  http://www.aibang.com/beijing/hunyanjiudian/

 

 

5.JQuery 屏蔽 div 鼠标事件

 

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有