javascript - 当明显嵌入跨域时，谷歌地图小部件如何检测鼠标位置并在其 iframe 之外发布事件？

Question

我正在开发一个可嵌入的 map 小部件，但是当我的小部件在跨域情况下作为(多个嵌套的)iframe 嵌入时，我很难检测鼠标移动并在 iframe 之外释放事件。

据我所知，这样的事情应该是不可能的——你不能向 window.parent 添加一个监听器——但谷歌地图小部件显然正在这样做。

1. 开始拖动 map ，
2. 将鼠标移出小部件 - map 会根据您的鼠标位置重新绘制，
3. 在小部件外部释放 - map 拖动停止。

他们是如何做到的 - 在所有浏览器上？

示例:http://jsbin.com/napepohavi/edit?html,output

Answer 1

当且仅当用户在框架内开始拖动操作时，鼠标的位置才能在框架外被检测到。在 window 元素上监听 mousemove 将达到目的:

$(window).on("mousemove", function(e) {
    console.log(e.pageX);
});

有一个条件:必须允许初始 mousedown 传播到窗口元素。换句话说，在拖动开始的元素上方的 DOM 中的任何位置 mousedown 上都不能有 preventDefault()。