js 浏览器兼容的一些方法
浏览数：22 /
时间：2015年06月09日
使用js是一件令人很抓狂的事情，很多的浏览器兼容，一大推的代码，谁的脑袋能记住那么多的东西，只有平时多积累，所谓熟能生巧嘛。。这里列出一些常用的兼容代码，一点点积累哈~~~
一、以跨浏览器的方式处理事件。这个叫EventUtil对象定义了一些方法，用来处理各浏览器之间的差异。
var EventUtil={
addHandler:function(element,type,handler){//绑定事件
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
removeHandler:function(element,type,handler){//取消事件
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
getEvent:function(event){//获取event对象
return event:event?window.event;
},
getTarget:function(event){//获取事件目标
return event.target||event.srcElement;
},
preventDefault:function(event){//阻止默认事件
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=flase;
}
},
stopPropagation:function(event){//阻止冒泡事件
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
},
getRelatedTarget:function(event){//mouseover,mouseout通过event提供相关元素信息
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
},
getButton:function(event){//获取鼠标按下键位
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
getCharCode:function(event){//键盘按下键的ascii值码
if(typeof event.charCode=="number"){
return event.charCode;
}else{
return event.keyCode;
}
},
//clipboardData 剪贴板对象，firefox不支持该对象
getClipboardData:function(event){//获取剪贴板数据
var clipboardData=(event.clipboardData||window.clipboardData);
return clipboardData.getData("text");
},
setClipboardData:function(event,value){
if(event.clipboardData){
return event.clipboardData.setData("text/plain",value);
}else if(window.clipboardData){
return window.clipboardData.setData("text",value);
}
},
}
二、对表单的操作兼容的一些函数：
1、取得用户在文本框取得的文本：
function getSelectedText(textbox){
if(document.selection){//ie
return document.selection.creatRange().text;
}else{
return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}
}
2、选择部分文本：
function selectText(textbox,startIndex,stopIndex){
if(textbox.setSelectionRange){
textbox.setSelectionRange(startIndex,stopIndex);
}else if(textbox.createTextRange){//ie
var range=textbox.createTextRange();
range.collapse(true);
range.moveStart(‘character‘,startIndex);
range.moveEnd(‘character‘,stopIndex-startIndex);
range.select();
}
textbox.focus();
}
三、一些常用的js自定义函数。
1、下面这个函数可以辅助向现有的URL的末尾添加查询字符串参数，查询字符串中的每个名称和值都应该用encodeURIComponent()进行编码，不然容易发生请求错误：
function addURLParam(url,name,value){
url+=(url.indexof(‘?‘)==-1?"?":"&");
url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
return url;
}
2、设置和获取cookie:
var CookieUtil={
get:function(name){
var cookieName=encodeURIComponent(name)+"=",
cookieStart=document.cookie.indexof(cookieNmae);
cookieValue=null;
if(cookieStart>-1){
var cookieEnd=document.cookie.indexof(";",cookieStart);
if(cookieEnd==-1){
cookieEnd=document.cookie.length;
}
cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
}
return cookieValue;
},
set:function(name,value,expires,path,domain,secure){
var cookieText=encodeURIComponent(name)+"="+encodeURIComponent(value);
if(expires instanceof Date){
cookieText+=";expires="+expires.toGMTString();
}
if(path){
cookieText+=";path="+path;
}
if(domain){
cookieText+=";domain="+domain;
}
if(secure){
cookieText+=";secure="+secure;
}
return cookieText;
}
unset:function(name,path,domain,secure){
this.set(name,"",new Date(0),path,domain,secure);
}
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
