爲什麼dragleave事件意外啓動？

Question

請參閱演示在 - http://jsfiddle.net/fSB32/2/

我的本意是，當拖動事件是在document解僱出現了重疊。因此，用戶可以在文檔的任何位置拖放圖像。當他這樣做時，出現一個很酷的覆蓋。在拖動事件完成時，疊加層應該隱藏自身。

我面臨的問題是dragleave事件意外啓動（請參閱演示中的控制檯），導致覆蓋層在出現時立即隱藏自身。如果您將代碼註釋掉以隱藏覆蓋圖，那麼它自然會出現並永遠不會顯示。

Answer 1

我自己想出了這個問題。

原因

拖動事件會引發連鎖反應。所以，讓我感到震驚的是，因爲當我使覆蓋層可見時，它觸發了dragenter，並且可能進一步拖動它的孩子觸發它，直到我正在傾聽的父母爲止。

但是，事實證明，只要dragenter被觸發，即使dragenter目標是孩子，也會觸發dragleave！因此，就我而言，當我將覆蓋圖顯示爲可見時，dragenter已觸發，dragleave在document和window上觸發。

的修復

所以理想的放置目標一定不能有任何的孩子，使內本身拖着不觸發dragleave。在我的情況下，放置目標覆蓋層佔用了整個窗口空間，所以在我的情況下，僅在覆蓋DOM上監聽dragleave就足夠了。這固定了90％的myc問題。

但是，當用戶在裏面拖動了兒童div時出現了問題。解決這個問題太簡單了。我的要求是我讓孩子div對鼠標事件不可見。爲此我們有神奇的CSS - pointer-events。設置這個屬性爲none是訣竅。唯一的缺點是，這是不支持IE，直到11

觀看演示http://jsfiddle.net/fSB32/5/

如果你需要支持低於11 IE，然後一招可以用來把一個空div爲孩子放置目標並確保它具有最高的z-索引，並且它覆蓋了完整的放置目標。這種方式拖動事件應該只針對這個DOM，因爲所有其他的孩子都可以「通過」它。