解決IE 下重疊div 對 mouseover 事件的穿透方法之一

? ? ? ? 歷經一天半的時間，我這前端的白癡終于想到了一個解決IE 下重疊div ?對 mouseover 事件的穿透方法。

?

?

現象： 兩個并列關系的Div(沒有父子關系)，但是兩個Div在位置上面有重疊，當鼠標在兩個div重疊部分的時候，會觸發下層div的mouseover事件(IE)，從而觸發上層div 的mouseleave事件。

?

?

? ? ? ? 注意：兩個div沒有父子關系，所以我沒有在事件冒泡上面進行探索，我對各種瀏覽器事件冒泡也不是很精通，想學習的童鞋可以上網查一下，這方面的資料相當的多。

?

? ? ? ? 探索的過程放到后面，先把最后的解決方便告訴大家，其實很簡單，就是在上層div的mouseleave事件中進行判斷，如果鼠標還在上層div中 就執行上層divmouseleave中的邏輯，不執行下層div的mouseenter邏輯(未實現)。

?

?

this._ul.mouseenter(function(e){

//JS里面訪問 類成員方法必須 使用this

that._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

var _dir_y = (e.clientY>temp_top)&&(e.clientY

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 鼠標事件

?

6.CSS 模板 或者 濾鏡 還實現下層div不處理mouseover事件？

?

總結

以上是生活随笔為你收集整理的android 浏览器 div穿透,解决IE 上重叠div 对 mouseover 事件的穿透方法之一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。