iframe 内事件冒泡

原创

于 2025-03-10 15:20:21 发布 · 558 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web3 #js #html5 #html

说明

网址: https://gitee.com/linuxmail/node-iframe-event-bubble

iframe 内鼠标事件和键盘事件冒泡。

支持 ctrl， shift， alt， meta 冒泡

npm i iframe-event-bubble

用法

// npm i iframe-event-bubble

import iframeEventBubble from "iframe-event-bubble";

// iframeElement 是 iframe 的 Element，不是 iframe 内的 document，第二个参数默认是 true
// true: 启用冒泡, false: 关闭冒泡
// 具体的事件见方法名,顾名思义即可

iframeEventBubble.bubbleClick(iframeElement, true/false);
iframeEventBubble.bubbleDblclick(iframeElement, true/false);
iframeEventBubble.bubbleMousedown(iframeElement, true/false);
iframeEventBubble.bubbleMouseup(iframeElement, true/false);
iframeEventBubble.bubbleMouseover(iframeElement, true/false);
iframeEventBubble.bubbleMouseout(iframeElement, true/false);
iframeEventBubble.bubbleMouseenter(iframeElement, true/false);
iframeEventBubble.bubbleMouseleave(iframeElement, true/false);
iframeEventBubble.bubbleKeydown(iframeElement, true/false);
iframeEventBubble.bubbleKeyup(iframeElement, true/false);
iframeEventBubble.bubbleKeypress(iframeElement, true/false);

源码

如果 npm 不方便, 下面是 ts 源码

const _mouseEventHandler = (eventType: string) => {
   
   
  try {
   
   
    let ev = (window as any).event
    if (!ev || !ev.view) {
   
   
      return
    }
    let ele = ev.view.document.body.___bubble_event_iframe_element__ || document.body
    let evt = new MouseEvent(eventType, {
   
   
      bubbles: true