時常看到拖拉式的方法上傳檔案,會有一個 Drop zone 讓檔案拖拉進去,在製作的過程中,我希望拉近去 Drop zone 的時候邊框會變色,所以綁了一個 dragenter 和 dragleave event 在 Drop zone container 中,但 Drop zone container 中有 child element 的話,如果拖拉的時候有碰觸到 child element 的話也會觸發我所綁定的 event,想了一些方式,但都是從 Javascript 的方面著手,像是比對目前觸發的 element 是不是 Drop zone container 之類的方式,寫起來個人還是覺得髒....,沒想到這個問題可以用 CSS3 來解決,CSS3 真的很威阿~~~。

只要將 child element 加上一個屬性:

pointer-events: none;

就這樣子解決了~~歡呼~~~

不過 IE 不支援,反正我也好久沒管他了~~呵呵呵

 

參考資料:

http://caniuse.com/#search=pointer-event

arrow
arrow
    文章標籤
    CSS3
    全站熱搜

    zack9433 發表在 痞客邦 留言(1) 人氣()