javascript - 单击 iframe 嵌入 map 时启用指针事件

Question

我在 iframe 标记中有一个 map ，并且工作得很好。我想要的只是当单击框架时，指针事件再次启用并交互(缩放、单击标记等)

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

在我的 css 文件中，我有以下样式

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

指针事件有效，但我无法与 map 交互。 我想要的是当点击 map 时指针事件变为“自动”

我已经尝试过这段 JavaScript 代码，但没有任何反应。有什么想法吗？

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

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

提前致谢

Answer 1

您无法获取具有“pointer-event:none”的元素的单击事件。你应该做的就是将其添加到 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>

希望这有帮助!