使用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);
}
}
- JS浏览器兼容问题
一.JS与DOM的兼容性: (一) DOM节点的访问: 1.以前对DOM节点访问一般用“document.All.元素ID属性值”或者“document.元素ID属性值”这种简化的方法,在FireFo ...
- js 浏览器兼容css中webkit、Moz、O、ms...写法封装(es6语法)
/** *浏览器兼容写法封装 */ let elementStyle = document.createElement('div').style let vendor = (() => { le ...
- js浏览器兼容
//window.event IE:有window.event对象 FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMo ...
- js 浏览器兼容问题及解决办法
JS中出现的兼容性问题的总结 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 我们都知道js通过style不可以获取行外样式,当我们需要获取行 ...
- IE9 以下版本浏览器兼容HTML5的方法,使用百度静态资源的html5shiv包
<!--[if lt IE9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.j ...
- scss、less 对浏览器兼容的处理方法, css 的单行溢出、多行溢出
1. scss @mixin rounded($param1,$param2) { #{$param1}:$param2; -webkit-#{$param1}: $param2; ...
- 浅谈CSS hack(浏览器兼容)
今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...
- 关于浏览器兼容问题及hack写法
浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( ...
- JS中常遇到的浏览器兼容问题和解决方法
今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...
随机推荐
- [make]makefile使用积累
[注]:文中所指手册皆为GNU make Version 4.1 1.make的一般特性 1.1.Makefiles的构成 Makefiles包含五种元素: 显式规则(explicit rules), ...
- 如何修复Outlook 2007源文件.PST及性能优化补丁
kb961752 微软发布了改善 Outlook 2007 个人数据文件性能的补丁,该补丁未来将会集成于 SP2 中,但是现在对于SP1用户可以提前得到它. 获取地址: http://suppor ...
- 用Python获取沪深两市上市公司股票信息,提取创近10天股价新高的、停牌的、复牌不超过一天或者新发行的股票,并存入mysql数据库
#该脚本可以提取沪深两市上市公司股票信息,并按以下信息分类:(1)当天股价创近10个交易日新高的股票:(2)停牌的股票:(3)复牌不超过一个交易日或者新发行的股票 #将分类后的股票及其信息(股价新高. ...
- C#编程:SqlCommand.Parameters.Add()方法的参数问题。
在存储过程中添加2个参数 sql语句 例: “update [tablename] username = @username where id=@id” 然后把需要的 command.Paramete ...
- Lucky 2048 - The secret of being lucky
Lucky 2048 uses a normal distribution to create "lucky" start. Generally speaking, it prov ...
- 本地mysql数据库root密码丢失修改方法
1,停止数据库 2,cd /etc/mysql 3,利用vim命令打开mysql配置文件my.cnf,在mysqld进程配置文件中添加skip-grant-tables,添加完成后,执行wd保存. ...
- 长时间停留在calculating requirements and dependencies 的解决方案
如果Eclipse花费了很长的时间calculating requirements and dependencies(计算需求和依赖性 ) 这个问题通常就是在点击安装之后显示“Calculating ...
- ccs3
[ 布局 Layout] display:none | intel |block | list-item | inline-block| [ 取值:] onne:隐藏对象.与visibility属性的 ...
- 绝不在构造和析构函数中调用 virtual 函数
看下面的这段代码,问 print调用的是基类还是派生类的版本? 答案是 基类... 可能大家会很惊讶,print不是virtual function 吗?为什么不是调用派生类的版本呢? 首先,当定义一 ...
- RABBITMQ(小总结 持续更新...
(一)理解消息通信 1.消息通信概念---消费者.生产者和代理 生产者(producer)创建消息,然后发送到代理服务器(RaabitMQ). 其中消息包括两部分内容:有效载荷(payload)和标签 ...