• 常用js对dom操作的分装[摘抄记录中....]


    兼容IE和其他浏览器冒泡事件的方法

    function bubblingFun(e) {
    			if(e.stopPropagation) {
    				e.stopPropagation() //IE阻止冒泡事件的方法
    			}else{
    				e.cancelBubble() 
    			}
    		}
    

    2.IE和其他浏览器为元素绑定事件的函数

    e.addEventListener()是w3c在标准监听函数的方法 ,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;
    但是 在IE8以下将不支持该方法,所以需要e.attachEvent() 该方法进行事件的绑定

    		function bindingFun(dom,nature,functionName) { // dom =>节点 anture => 事件名称 [例如 单击,双击, 鼠标移入/移除] ,functionName=>函数名称
    			if(dom.addEventListener) { //优先使用该方法 ,该方法可以反复给同一个元素添加多个事件
    				dom.addEventListener(nature,functionName) //
    			}else if(dom.attachEvent){ // 当部分浏览器无法使用上个方法的时候 , 则使用该方法 , 该方法只要是IE使用的
    				dom.attachEvent('on' + nature,function() { functionName.call(dom) })
    			}else{
    				dom['on' + nature] = functionName
    				//  dom.onclick = function(){}
    			}
    		}
    

    3.兼容ie和其他浏览器为元素移除事件的函数 

    	function removeEvent(dom,type,functionName) { // dom => 节点 ,type : 事件类型 ,functionName =>移除函数名称  
    		if(dom.removeEventListener) { //非IE浏览器采用dom2级事件处理 , 移除事件:removeEventListener 
    			dom.removeEventListener(type,functionName,false)
    		}else if(dom.datechEvent){ // IE浏览器使用 datechEvent进行事件移除
    			dom.datechEvent('on' + type , functionName)
    		}else{//dom0级事件处理
    		dom['on' + type] = 	functionName
    		}
    	}
    

    4.兼容获取IE和其他浏览器获取事件本身的对象 

    function getEvent(event) {
    		return event ? event : window.event
    	}
    

    5.兼容IE和其他浏览器获取事件源头元素(标签)  未测试------------------------------------------------------------------------------

    function getEventDom(event) {
    		return event.target || event.srcElement
    	}
    

    6.兼容IE和其他浏览器阻止元素默认事件的方法 

    function preventDefault(event) {
    //阻止默认的事件行为
    if (event.preventDefault) {
    event.preventDefault();
    } else {
    event.returnValue = false;
    }
    }

    7.兼容IE和其他浏览器获取css的方法 

    function getCssStyle(element,attribute){
    	if(window.getComputedStyle){
    		return	window.getComputedStyle(element,null)[attribute];	
    	}
    	else{
    		return	element.currentStyle[attribute];
    	}	
    }
    

    8.兼容多个浏览器获取当前滚动的位置

    window.getScrollOffset = function() {
    			if (window.pageXOffset) {
    				console.log( {
    					x: document.body.scrollLeft + document.documentElement.scrollLeft,
    					y: document.body.scrollTop + document.documentElement.scrollTop,
    				})
    				return {
    					x: window.pageXOffset,
    					y: window.pageYOffset,
    				}
    			} else {
    				console.log( {
    					x: document.body.scrollLeft + document.documentElement.scrollLeft,
    					y: document.body.scrollTop + document.documentElement.scrollTop,
    				})
    				return {
    					x: document.body.scrollLeft + document.documentElement.scrollLeft,
    					y: document.body.scrollTop + document.documentElement.scrollTop,
    				}
    			}
    		}
    

    9.兼容所有的浏览器,清除字符串前后的空格

    function trim(str) {
        if (str & typeof str === "string") {
            return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
        }
    }
    

    [18 ]-----------------------------------------

  • 相关阅读:
    Python 多核 多线程 调度
    mysql-select for update
    Python logging模块
    TCP/IP和HTTP协议与Socket的区别联系
    DNS+CDN
    wget命令
    Cannot find module 'webpack-cli/bin/config-yargs
    TS7015: Element implicitly has an 'any' type because index expression is not of type 'number'
    js 创建私有变量
    报错集锦及解决方案
  • 原文地址:https://www.cnblogs.com/zxli/p/15225337.html
Copyright © 2020-2023  润新知