分類: 為什么 常識(shí)詞典 編輯 : 常識(shí) 發(fā)布 : 09-27

閱讀 :329

如何在非表層的 HTML 元素中獲得 DOM 鼠標(biāo)事件？我想用 HTML 5 制作一個(gè)類似網(wǎng)頁(yè)版 P-otos-op 的工具網(wǎng)站，其中有圖層的概念，在主場(chǎng)景中，用戶可以添加多個(gè)圖層（相同位置疊加同樣大小的 div 實(shí)現(xiàn)），并在不同圖層添加圖片等元素，并且可以對(duì)圖片進(jìn)行選擇/放縮/刪除等操作。問(wèn)題是：只有位于最上層 div 中的元素才能獲取 DOM 鼠標(biāo)事件（所有圖層 div 都是透明背景）P.S. 不能改變圖層間的上下關(guān)系我嘗試過(guò) dispatc-Event 給所有的圖層，但是 dispatc-Event 好像忽略了事件模型中的捕捉階段。所以圖層中的子元素?zé)o法獲得事件。6 個(gè)答案

答案 1：

如果是 div 層疊的話，下層的 div 是永遠(yuǎn)不會(huì)被點(diǎn)擊到的，所謂的事件代理，連事件源都不對(duì)，是不可能正確實(shí)現(xiàn)需求的～～我曾經(jīng)遇到過(guò)這樣的問(wèn)題，有人給出這樣的解決方案，可以參考參考：g-ky/2010...

答案 2：

你可以考慮實(shí)現(xiàn)某-元素管理機(jī)制，比如你所有的圖層 應(yīng)該有一個(gè)共同的父級(jí) 元素，點(diǎn)擊某個(gè)圖層時(shí)，事件一定會(huì)冒泡到父級(jí)元素。通過(guò)-父級(jí)元素的事件通知其他圖層 點(diǎn)擊事件 發(fā)生了。

答案 3：

正如 @李國(guó)新 所說(shuō)的，實(shí)際上是由父級(jí)元素或者相關(guān)元素（比如你這里的覆蓋在最上的元素）的dom事件觸發(fā)了子元素的自定義事件。

答案 4：

可以考慮下這個(gè)css屬性：pointer-events，不過(guò)它不支持IE

答案 5：

沒(méi)搞清楚你的需求，如果只是要操作不同圖層的圖片，為何不加一個(gè)菜單，讓用戶先選擇要操作那個(gè)圖層，然后在最上層添加一個(gè)操作框，讓背后的圖片的大小位置屬性和最上層這個(gè)操作框?qū)傩酝瑫r(shí)更新

答案 6：

問(wèn)題已經(jīng)解決！其實(shí)最終方案很簡(jiǎn)單，確實(shí)像龔浩所說(shuō)，很多時(shí)候思維定勢(shì)阻礙了思考...解決方案是：將所有圖層都設(shè)定成0px*0px大小的元素，overflow設(shè)為默認(rèn)的visible，就可以了！這樣的話既維持了圖層間的上下關(guān)系，又可以使得所有圖層的子元素都是可操作的...

下一篇:金蝶隨手記的iP-one版是誰(shuí)開(kāi)發(fā)的？ 下一篇 【方向鍵 ( → )下一篇】

上一篇:新浪微博還能走多久？未來(lái)到底是微博的天下還是輕博客，還是facebook的天下 ？ 上一篇 【方向鍵 ( ← )上一篇】