封装原生js最常用的10个方法（兼容所有浏览器）

旧城等待， 2021-10-15 23:25 484阅读 0赞

##### 1、事件封装 #####

##### 2、封装取消冒泡的函数 #####

function stopBubble(event){ 
    if(event.stopPropagation){ 
    		event.stopPropagation();
    	}else{ 
    		event.cancelBubble = true;
    	}
    }

##### 3、 阻止默认事件 #####

function cancelHander(event){ 
    if(event.preventDefault){ 
    		event.preventDefault();
    	}else{ 
    		event.returnValue = true;
    	}
    }

##### 4、解除事件 #####

function removeEvent(elem,type,handle){ 
    	if(elem.removeEventListener){ 
    		elem.removeEventListener(type,handle,false);
    	}else if(detachEventListener){ 
    		elem.detachEventListener('on' + type,handle)
    	}else{ 
    		elem['on' + type] = false;
    	}
    }

##### 5、寻找节点的行间样式的某个属性 #####

function getStyle(elem,prop){ 
    	if(window.getComputedStyle){ 
    		return window.getComputedStyle(elem,null)[prop];
    	}else{ 
    		return elem.currentStyle[prop];
    	}
    }

##### 6、坐标 #####

function xy(event){ 
    	if(event.pageX){ 
    		return{ 
    			X : event.pageX,
    			Y : event.pageY
    		}
    	}else if(event.clientX){ 
    		return{ 
    			X : event.clientX,
    			Y : event.clientY
    		}
    	}else{ 
    		return{ 
    			X : event.offsetX,
    			Y : event.offsetY
    		}
    	}
    }

##### 7、求滚动轮的滚动距离 #####

function getScrollOffset(){ 
    	if(0 && window.pageXOffset){ 
    		return{ 
    			X : window.pageXOffset,
    			Y : window.pageYOffset
    		}
    	}else{ 
    		return{ 
    			X : document.body.scrollLeft + document.documentElement.scrollLeft,
    			Y : document.body.scrollTop + document.documentElement.scrollTop
    		}
    	}
    }

##### 8、查看视口的尺寸 #####

function getViewportOffset(){ 
    if(window.innerWidth){ 
    	return{ 
    		W : window.innerWidth,
    		H : window.innerHeight
    	}
    }else{ 
    	if(document.compatMode === "BackCompat"){ 
    		return{ 
    			W : document.body.clientWidth,
    			H : document.body.clientHeight
    		}
    	}else{ 
    		return{ 
    			W : document.documentElement.clientWidth,
    			H : document.documentElement.clientHeight
    		}
    	}
    }
    }

##### 9、判断引用类型 #####

##### 10、深度克隆 #####

function type(target){ 
    var template = { 
    	"[object Array]" : "array",
    	"[object Object]" : "object",
    	"[object Number]" : "number - object",
    	"[object Boolean]" : "boolean - object",
    "[object String]" : "string - object"
    }
    var str = Object.prototype.toString.call(target);
    if(target === null)
    	return "null";
    else if(typeof(target) == "object")
    	return template[str];
    else
    	return typeof(target);
    }