将 DOM 鼠标事件从子页面<object>传递到父页面的选项

Question

我有一个水疗中心，它使用小部件拖动模型来供用户通过将小部件拖放到设计表面上，以设计自己的仪表板。小部件是带有嵌入式JavaScript的HTML页面，并添加到带有标签的父dom中。

我有一个特定的用例，即使鼠标在一个小部件对象之一上，父页面也需要知道页面上的鼠标位置。但是，由于widget对象dom和parent dom之间的dom事件是隔离的，我认为没有办法让鼠标事件泡泡到父dom中(例如，指针 - 事件不起作用(，并且已经开始写作小部件和父页之间的简单事件通知系统。

在我构建自己的活动管道上太远之前，我想与Stackoverflow社区联系，没有偷偷摸摸的方法可以让父母接收鼠标事件，从html/css/css/css/css/css/css/css中燃烧的鼠标事件JavaScript函数？

(我会设置一个小提琴来显示这一点

    // Create widgets
    function loadWidget(myFrag, widgetNum) {
        var widgetObj = document.createElement("object");
        widgetObj.type = "text/html";
        widgetObj.data = "widgets/" + widgets[widgetNum].type + "." + widgets[widgetNum].ext + parent.debugURL                                  // location of widget
        widgetObj.className = "widget";
        widgetObj.id = "widgetObj" + widgetNum;
        widgetObj.addEventListener("load", widgetLoaded, false);
        myFrag.appendChild(widgetObj);                                                                                                          // build widgets onto fragment
    }

Answer 1

对于跨孔框架，没有办法在框架和主文档中让您的手势事件泡泡。
Mouseevents也不能像postMessage一样克隆，但是您只能使用事件中需要的道具自己创建一个简单的对象。

parent.postMessage({
  type: event.type,
  clientX: event.clientX,
  clientY: event.clientY,
  target_id: event.target.id // (elements can't be cloned for postMessage)
}, '*')

另一个选项是向父母发送一条消息，以便它激活覆盖元素以在某些时刻捕获鼠标事件，但是您会在框架中放松事件。

，但由于您的框架文档似乎来自与主文档相同的来源，因此您可以简单地添加主文档中的侦听器：

// obj is your <object> element
// wait for it to load
  // (may require an obj.data = obj.data for some UA when the page has been cached)
obj.onload = e => { 
  const doc = obj.contentDocument; // get access to the framed Document
  const target = doc.querySelector(selector); // get access to the target
  target.addEventListener(eventType, eventHandler); // yes that's all
  // now eventHandler will be executed from the main doc, with the event from the framed one
 };

实时演示