原因：

冒泡只能通過一個(gè)文檔樹進(jìn)行。iframe是一個(gè)獨(dú)立的文檔樹，因此在其樹中冒泡的事件終止于iframe文檔的根部，并且不會(huì)跨越邊界進(jìn)入宿主文檔。

解決方法：

1.postMessage onmessage

·父頁面

父頁面接受iframe消息

window.addEventListener(

  "message",

  (event)=>{

  console.log(event.data)

  }

);

父頁面向iframe發(fā)送消息

window.postMessage

在postMessage(message, targetOrigin, transfer)函數(shù)中可以傳遞3個(gè)參數(shù)，分別是

1.message：需要發(fā)送的消息

2.targetOrigin：目標(biāo)源，如：“http://127.0.0.1:5500/”，“*” 表示全部通配符

3.transfer：取消深拷貝的數(shù)據(jù)，通過message發(fā)送對(duì)象是深拷貝的數(shù)據(jù)，會(huì)在目標(biāo)頁面和當(dāng)前頁面產(chǎn)生兩個(gè)對(duì)象，如果直接發(fā)送消息會(huì)十分損耗性能，使用transfer可以達(dá)到保存數(shù)據(jù)的功能

<script setup>

import { ref } from 'vue';

const ifrmeElement = ref(null)

const postMessage = (data) => {

ifrmeElement.value.contentWindow.postMessage(data, '*')

}

</script>

<template>

    <div id="map">

        <iframe ref="ifrmeElement" 

        </iframe>

    </div>

</template>

·嵌入的iframe子頁面

iframe子頁面接收父界面消息

   window.addEventListener("message", (e) => {

        console.log("子頁面收到信息", e.data);

    });

iframe子頁面向父界面發(fā)送消息

     window.parent.postMessage(e.data, "*");

鼠標(biāo)事件與iframe

iframe是一個(gè)獨(dú)立的文檔樹,是一個(gè)沙箱,鼠標(biāo)事件終止于iframe文檔根部,無法冒泡到外層

【javascript】mouseup與iframe踩坑

iframe 上監(jiān)聽mouseup失敗

mousedown和mouseup解決方法:

第一種方法:在mousedown時(shí)創(chuàng)建一個(gè)遮蓋層，mouseup時(shí)移除。

第二種方法:設(shè)置iframe元素,style,pointer-events:none,但是設(shè)置這個(gè)iframe內(nèi)部事件無法響應(yīng)

當(dāng)mousemove遇到iframe

mousemove事件解決方法:

第一種方法:在需要監(jiān)聽mousemove事件時(shí),設(shè)置iframe元素,style,pointer-events:none的類名,不需要監(jiān)聽時(shí)移除類名

Receive mousemove events from iframe, too

第二種方法:

新建事件再分發(fā)到父頁面

1.子界面監(jiān)聽move事件，把type和x，y發(fā)送到父級(jí)（直接傳遞e報(bào)錯(cuò)：Failed to execute ‘postMessage’ on ‘Window’: MouseEvent object could not be cloned）

  document.addEventListener('mousemove',(e)=>{

    window.parent.postMessage({

      type: 'mousemove',

      x: e.clientX,

      y: e.clientY

    }, "*");

  })

2.父界面接受并分發(fā)

window.addEventListener(

  // 為window添加一個(gè)message事件

  "message",

  // 當(dāng)收到消息時(shí)，執(zhí)行回調(diào)函數(shù)

  (event)=>{

  // 判斷消息的類型是否為mousemove

  if(event.data.type === 'mousemove'){

    // 創(chuàng)建一個(gè)自定義事件

    var evt = new CustomEvent('mousemove', {bubbles: true, cancelable: false});

    // 設(shè)置自定義事件的x坐標(biāo)

    evt.clientX = event.data.x ;

    // 設(shè)置自定義事件的y坐標(biāo)

    evt.clientY= event.data.y;

    // 觸發(fā)自定義事件

    ifrmeElement.value.dispatchEvent(evt);

  }

  }

);

ifrmeElement.value.addEventListener('mousemove', (event) => {

        // 打印出鼠標(biāo)的x和y坐標(biāo)

        console.log(event.clientX, event.clientY);

})