iframe 삽입 된지도를 클릭하면 포인터 이벤트가 활성화됩니다.

Question

iframe 태그에지도가 있으며 잘 작동합니다. 프레임을 클릭하여 포인터 이벤트가 나는 다음 스타일

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

포인터가 내 CSS 파일에서

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

(마커 등을 클릭, 줌)을 다시 활성화하고 상호 작용을 할 때 내가 원하는 모든입니다 이벤트가 작동하고지도와 상호 작용할 수 없습니다. 내가 원하는 것은지도를 클릭하면 포인터 이벤트가 '자동'이됩니다.

이 자바 스크립트 코드를 시도했지만 아무 반응이 없습니다. 어떤 아이디어? 사전

Answer 1

에서

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

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

덕분에 당신은 ": 없음 포인터 이벤트"가 요소의 이벤트를 클릭 얻을 수 없습니다. 당신이해야 할 일은 단지 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> 

희망

로 스크립트를 호출!