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

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“,总之一个合法的变量名字就可以,然后执行完就产生这个全局变量。




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章