當點擊iframe嵌入式地圖時啓用指針事件

Question

我在iframe標記中有一張地圖並且工作得很好。所有我想要的是當點擊幀指針事件再次啓用和交互（縮放，點擊標記等）

<iframe id="map" src="map.html"></iframe> 

在我的CSS文件，我有以下的風格

#map { 
     margin-left:0px; 
     width:107%; 
     pointer-events: none; 
    } 

指針事件起作用，我無法與地圖互動。 我想要的東西是當點擊地圖上的指針事件變成'自動'

我試過這段代碼的JavaScript，沒有任何反應。有任何想法嗎？

<script> 
    $(document).ready(function() { 
     $('#map').css('pointer-events', 'none'); 

     $('#map').click(function() { 
     $(this).css('pointer-events', 'auto'); 
     }); 
    }); 
</script> 

在此先感謝

Answer 1

你不能讓點擊其中有「指針事件：無」的元素的事件。你應該做的只是添加一個div內。

例如，

<div class="map-wrapper"><iframe id="map"></iframe></div> 

然後，打電話給你的腳本

<script> 
     $(document).ready(function() { 
      $('#map').css('pointer-events', 'none'); 
      $('.map-wrapper').click(function() { 
      $(this).find('#map').css('pointer-events', 'auto'); // just $('#map') also fine 
      }); 
      $('.map-wrapper').mouseleave(function() { 
      $(this).find('#map').css('pointer-events', 'none'); // making it not clickable when it's not in focus 
      }); 

     }); 
    </script> 

希望這有助於！