創建覆蓋整個頁面的墊片，但在後臺允許鼠標懸停事件

我需要爲整個頁面創建一個墊片以捕獲點擊事件，但墊片不能停止其他事件，如鼠標懸停等在其他html元素上這一頁。創建覆蓋整個頁面的墊片，但在後臺允許鼠標懸停事件

我有這樣的解決方案，但我有幾個問題：每當我點擊頁面，如果我直接點擊一些文本，墊片的點擊事件不會觸發（那裏在頁面上沒有事件取消）。

onclick問題只出現在IE中。

在FF和Chrome有與背景沒有被解僱的鼠標懸停事件的一個問題，所以我當然會喜歡上解決了還有什麼祕訣......

下面是一個非常簡單的例子演示問題。

任何想法？ :-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     body 
     { 
      font-size:20px; 
      height:100%; 
     } 
     #shim 
     { 
      position: absolute; 
      padding: 0; 
      margin: 0; 
      top: 0px; 
      left: 0px; 
      width: 100%; 
      height: 100%; 
      zindex: 1; 
     } 
     #trace 
     { 
      border: 1px solid #ccc; 
      height: 100px; 
     } 
    </style> 

    <script type="text/javascript"> 
     function trace(e) { 
      e = e || event; 
      document.getElementById('trace').innerHTML = "Hovered innerHTML: " + (e.target || e.srcElement).innerHTML; 
     } 
    </script> 

</head> 
<body> 
    <div id="shim" onclick="alert('shim clicked')"> 
    </div> 
    <table border="1" onmouseover="trace(event)"> 
     <tr> 
      <td> 
       AAAAAA AAAAAA 
      </td> 
      <td> 
       BBBBBB BBBBB 
      </td> 
      <td> 
       CCCCCCCC CCCCC 
      </td> 
      <td> 
       DDDDDD DDDDDDDDDD 
      </td> 
      <td> 
       EEEEEE EEEE 
      </td> 
      <td> 
       FFFFFF FFFFF 
      </td> 
      <td> 
       GGGG GGGGGGGG 
      </td> 
      <td> 
       EEEE EEEE 
      </td> 
      <td> 
       FFFF FFFFFF 
      </td> 
     </tr> 
    </table> 
    <div id="trace"> 
    </div> 
</body> 
</html>

來源

2010-07-13 einarq

我不知道是否可以解決您的問題，但我已經做了像幾周前那樣對我有用的東西。

基本上，我創建了一個全局事件處理程序，在文檔元素中註冊了我需要的所有事件，然後使用event.srcElement或event.element，我能夠獲取首先觸發事件的元素。根據事件和元素，我可以決定做什麼。

來源

2010-07-13 17:16:14

創建覆蓋整個頁面的墊片，但在後臺允許鼠標懸停事件

回答

相關問題