博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript常用脚本集锦4
阅读量:6880 次
发布时间:2019-06-26

本文共 4503 字,大约阅读时间需要 15 分钟。

一些元素位置设置的通用方法

/** * 查找元素的左端位置, * 代码依赖: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);}

代码来源:

元素相对于整个父亲节点的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);}

代码来源:

元素相对于整个文档的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;}

代码来源:

事件模型的封装

/** * * @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;};

代码来源:

阻止事件冒泡和默认行为的通用函数

/** * 阻止事件冒泡的通用函数 * */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;}

代码来源:

转载地址:http://xtgfl.baihongyu.com/

你可能感兴趣的文章
startService() 过程
查看>>
WebSocket 协议 1~4 节
查看>>
Android-WItemTouchHelperPlus几行代码搞定仿QQ侧滑
查看>>
Glide 知识梳理(5) 自定义GlideModule
查看>>
聊聊eureka的delta配置
查看>>
Masonry 源码解读(下)
查看>>
Swift如何给应用添加3D Touch菜单
查看>>
05_Node js 文件管理模块 fs
查看>>
关于python中可迭代对象和迭代器的一些理解
查看>>
界面无小事(五):自定义TextView
查看>>
ES6读书笔记(三)
查看>>
视频播放器全屏旋转方案
查看>>
根据调试工具看Vue源码之生命周期(一)
查看>>
RxJS教程
查看>>
在高并发环境下Reids做缓存踩坑记录
查看>>
通俗易懂--岭回归(L2)、lasso回归(L1)、ElasticNet讲解(算法+案例)
查看>>
Word类报表实例 - 质量检测报告
查看>>
Java进阶篇设计模式之二 ----- 工厂模式
查看>>
2018以太坊编程语言solidity最佳IDE
查看>>
hey,你的CommonJS规范
查看>>