JavaScript经常使用剧本集锦4

2024年3月13日 187次阅读 来源: 两仪

一些元素位置设置的通用要领

/**
 * 查找元素的左端位置,
 * 代码依靠：getStyle来自 https://gist.github.com/hehongwei44/9abf63536accd0f2eeb7
 * */

function posX(elem) {
    return parseInt(getStyle(elem, "left"));
}
/**
 * 查找元素的顶端位置
 * */

function posY(elem) {
    return parseInt(getStyle(elem, "top"));
}

/*设置元素x和y位置(与当前位置无关)的一对函数*/
/**
 * 设置元素程度的函数
 * */
function setX(elem, pos) {
    elem.style.left = pos + "px";
}

/**
 * 设置元素垂直位置的函数
 * */
function setY(elem, pos) {
    elem.style.top = pos + "px";
}

/**
 * 在元素的程度位置上增添像素间隔的函数
 * */
function addX(elem, pos) {
    setX(posX(elem) + pos);
}
/**
 * 在元素的垂直位置上增添像素间隔的函数
 * */
function addY(elem, pos) {
    setY(posY(elem) + pos);
}

代码泉源：https://gist.github.com/hehongwei44/7f0eca7c0a0ae19adc9f

元素相对于全部父亲节点的left和top的辅佐函数

/**
 * 元素elem相对于父亲元素的左端和顶端的位置
 * 依靠剧本:https://gist.github.com/hehongwei44/8d33a6e35ee045722e75
 * */

/**
 * 猎取元素相对于父亲元素的程度位置
 * */
function parentX(elem) {
    /**
     * 假如offsetParent是元素的父亲,那末提早提出
     * 不然,我们须要找到元素和元素的父亲相对于全部页面位置，并盘算他们之间的差
     * */
    return elem.parentNode == elem.offsetParent ? elem.offsetLeft : pageX(elem) - pageX(elem.parentNode);
}

/**
 * 猎取元素相对于父亲元素的顶端位置
 *
 * */
function parentY(elem) {
    /**
     * 假如offsetParent是元素的父亲,那末提早提出
     * 不然,我们须要找到元素和元素的父亲相对于全部页面位置，并盘算他们之间的差
     * */
    return elem.parentNode == elem.offsetParent ? elem.offsetTop : pageY(elem) - pageY(elem.parentNode);
}

代码泉源：https://gist.github.com/hehongwei44/d8530ae974b1aabbab55

元素相对于全部文档的left和top的辅佐函数

/*元素elem相对于全部文档的左端和顶端的位置*/

/**
 * 猎取元素的程度位置
 * */
function pageX(elem) {
    /**
     * 参看我们是不是位于根元素
     * 假如我们能继承获得上一个元素,增添当前偏移量并继承向下递归.
     * 不然,猎取当前的偏移量.
     * */
    return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
}

/**
 * 猎取元素的顶端位置
 *
 * */
function pageY(elem) {
    /**
     * 参看我们是不是位于根元素
     * 假如我们能继承获得上一个元素,增添当前偏移量并继承向下递归.
     * 不然,猎取当前的偏移量.
     */
    return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
}

代码泉源：https://gist.github.com/hehongwei44/8d33a6e35ee045722e75

事宜模子的封装

/**
 *
 * @author Dean Edwards
 * @date 2005/10
 * @link http://dean.edwards.name/weblog/2005/10/add-event/
 * @transform  https://github.com/hehongwei44
 * @compatibility IE6+ ,FF, chrome
 *
 * */

 //挪用体式格局->addEvent(window, "load", function(){})
function addEvent(element, type, handler) {
    //假如浏览器原生支撑W3C的规范行动addEventListener函数,则直接绑定函数句柄.
    if (element.addEventListener) {
        //flase示意不支撑事宜捕获,主流浏览器都支撑该规范,IE9+
        element.addEventListener(type, handler, false);
    } else {
        // 为每一个事宜句柄赋值一个自力的ID,addEvent.guid的初始值为1.
        if (!handler.$$guid) handler.$$guid = addEvent.guid++;
        // 为元素竖立一个事宜范例的散列表
        if (!element.events) element.events = {};
        // 为每对元素/事宜竖立一个事宜处置惩罚函数的散列表
        var handlers = element.events[type];

        if (!handlers) {

            handlers = element.events[type] = {};
            // 存储已有的事宜处置惩罚函数(假如已存在一个)，ps:用来特别处置惩罚"on+type"的范例事宜.
            if (element["on" + type]) {
                handlers[0] = element["on" + type];
            }
        }
        // 在散列表中存储该事宜的处置惩罚函数.
        handlers[handler.$$guid] = handler;
        // 赋以一个全局事宜处置惩罚函数来处置惩罚一切的事情
        element["on" + type] = handleEvent;
    }
}
// 建立自力ID的计数器
addEvent.guid = 1;

function removeEvent(element, type, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
    } else {
        // 从散列表中删除事宜处置惩罚函数
        if (element.events && element.events[type]) {
            delete element.events[type][handler.$$guid];
        }
    }
}
//事宜处置惩罚函数
function handleEvent(event) {
    var returnValue = true;
    // 猎取事宜对象(IE运用全局事宜对象)
    event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
    // 猎取事宜处置惩罚函数散列表的援用.
    var handlers = this.events[event.type];
    // 顺次实行每一个事宜处置惩罚函数
    for (var i in handlers) {
        this.$$handleEvent = handlers[i];
        //实行回调函数
        if (this.$$handleEvent(event) === false) {
            returnValue = false;
        }
    }
    return returnValue;
}

//从新包装event对象,使其兼容IE和W3C规范.
function fixEvent(event) {
    // 增添W3C规范事宜要领.
    event.preventDefault = fixEvent.preventDefault;
    event.stopPropagation = fixEvent.stopPropagation;
    return event;
}
//IE浏览器阻挠默许行动的体式格局
fixEvent.preventDefault = function () {
    //this指向event对象
    this.returnValue = false;
}
//IE浏览器阻挠冒泡的体式格局
fixEvent.stopPropagation = function () {
    //this指向event对象
    this.cancelBubble = true;
};

代码泉源：https://gist.github.com/hehongwei44/3c9ec099751f8f2e197e

阻挠事宜冒泡和默许行动的通用函数

/**
 * 阻挠事宜冒泡的通用函数
 * */
function stopBubble(e) {
    if (e && e.stopPropagation) {
        e.stopPropagation();
    } else {
        window.event.cancelBubble = true;
    }
}

/**
 * 防备发作默许浏览器行动的通用函数
 * */
function stopDefault(e) {
    if (e && e.preventDefault) {
        e.preventDefault();
    } else {
        window.event.returnValue = false;
    }
    return false;
}

代码泉源：https://gist.github.com/hehongwei44/5fb2134a70ab8379849e

    原文作者：两仪
    原文地址: https://segmentfault.com/a/1190000002473155
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞