flash裡面有個很好的特性是，乙個容器裡，不存在實際物件的部分，不會阻攔滑鼠事件穿透到下一層。
前端就不一樣了，兩個div層疊以後，上層div會接收到所有事件（即使這個div裡面內容是空的，沒有任何實際物件），下層div什麼事件都接不到。
舉個例子：
這個示意圖中
c方塊在a容器中（a容器邊框為紅色）
d方塊在b容器中（b容器邊框為綠色）
a b部分重疊，b在上層。
不做任何處理的話，c方塊永遠無法被點到，因為b把它蓋住了。
下面，我將給出一種方案，在不改變頁面結構的情況下，讓cd都能得到正常相應。
主要利用的是css中的pointer-events屬性
pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
預設值：auto
適用於：所有元素
繼承性：有
動畫性：否
計算值：指定值
auto：
與pointer-events屬性未指定時的表現效果相同。在svg內容上與visiblepainted值相同
none：
元素永遠不會成為滑鼠事件的target。但是，當其後代元素的pointer-events屬性指定其他值時，滑鼠事件可以指向後代元素，在這種情況下，滑鼠事件將在捕獲或冒泡階觸發父元素的事件偵聽器。
其他值只能應用在svg上。
注意，這個屬性部分舊版瀏覽器可能不支援。
我注意到，設定為none之後，其子元素仍然可以通過顯式設定auto來響應滑鼠事件，那麼我們可以將a b容器都設定為none，不響應滑鼠事件，同時，將cd顯式設定為auto，讓他們響應滑鼠事件，這樣一來，b就不會擋住a了，下面是具體**
結果如下：
js 監聽事件的疊加和移除
html dom元素有很多on開頭的監聽事件，如onload onclick等，見dom事件列表。但是同一種事件，後面註冊的會覆蓋前面的 window.onresize function window.onresize function 改變視窗大小時，只會彈出2 利用addeventlistene...
js實現可拖拽的div
doctype html html lang en head meta charset utf 8 title zzw drap title style box bar content style head body div id box div id bar 可拖拽頭部 div div id co...
js自定義事件的簡單實現
在寫這段 之後，本人使用過jquery這個庫，一直對jquery的自定義事件有疑惑，就看了看jquery的原始碼，廓然開朗。jquery 實現和觸發自定義實現如下 jquery的定義方式 dom bind data change function jquery使用方式 dom trigger ini...