JS+JQuery实现任意意嵌套的IFrame里鼠标相对于浏览器窗体坐标

本文链接：https://blog.youkuaiyun.com/lightspear/article/details/50993239

本文介绍了一段使用jQuery实现的代码，该代码能够获取任意iframe中的鼠标坐标，并将其转换为相对于顶级窗口的坐标。代码简洁高效，适用于需要在iframe环境中处理鼠标事件的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iframe用过的都人都知道，iframe是一个事件无法向上级冒泡二期交互并不是那么方便的一个html元素，但是时至今日他独特的功能还是会出现在不少开发中，有时我们需要获取任何一个不定的iframe中的鼠标坐标，其中这个坐标是相对最高级window.top的鼠标坐标，或许你不常有这种需求，但是如果有制作过一些插件的经验，估计你一定遇到过这个蛋疼的问题。

注意：我这里指的坐标是不计算滚动条的。利用的event.screenX（鼠标相对屏幕左上角）和event.clientX（鼠标相对浏览器左上角）

直接上需要引用的JS（需要依然JQuery）

(function (flag, VariableName) {
    if (typeof (window[VariableName]) != "undefined") return;
    if (flag) return;
    var top_window = window.top;
    var top_doc = top_window.document;
    var NameSpace = ".MouseHelper";
    var MoveEvent = "mousemove" + NameSpace;

    function MouseHelper() {
        var self = this;

        self.mouseX = 0;
        self.mouseY = 0;
        self.browerX = 0;
        self.browerY = 0;

        $(top_doc).unbind(MoveEvent).bind(MoveEvent, function (e) {
            self.mouseX = e.clientX;
            self.mouseY = e.clientY;
            self.browerX = e.screenX - e.clientX;
            self.browerY = e.screenY - e.clientY;
        });
    }


    var info;
    if (typeof (top_window[VariableName]) == "undefined") info = new MouseHelper();
    else info = top_window[VariableName]

    try {
        if (frameElement != null) {
            $(document).unbind(MoveEvent).bind(MoveEvent, function (e) {
                info.mouseX = e.screenX - info.browerX;
                info.mouseY = e.screenY - info.browerY;
            });
        }
    } catch (e) {

    }
    window[VariableName] = info;
}(typeof (jQuery) == "undefined", "MouseInfo"));

用法很简单，执行完这段JS后你有有一个全局变量MouseInfo（且这段JS可以无限多次引用已做方重复处理，不会引起事件叠加消耗性能），他其中两个字段为MouseInfo.mouseX和MouseInfo.mouseY,他会随着鼠标移动实时变化而不停赋值，所以什么时候需要取坐标了直接就像这样如下：

var X=MouseInfo.mouseX;

var Y=MouseInfo.mouseY;

注意：有人说我不喜欢叫MouseInfo，你也可以自己改“MouseInfo“为别的什么例如”abc“，总之一个合法的变量名字就可以，然后执行完就产生这个全局变量。