使用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 ...
随机推荐
- MVC中使用js拼接的元素验证问题
MVC使用的验证方式本质上是jquery.validation js 拼接的格式如下: <input class='required' title='请输入项目名称!' id='Project ...
- Go! new Hello World, 我的第一个Go程序
以下语句摘自百度百科: Go语言是谷歌2009发布的第二款开源编程语言. Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持并行进 ...
- Hibernate映射一对一关联关系
映射一对一关联 Hibernate提供了两种映射一对一关联关系的方式,分别是按照外键映射和按照主键映射. 下面是员工表和档案信息表(员工和档案表之间的关系是一对一的关系) 档案表(dept) pub ...
- 开源BTS产品中存在多处漏洞,攻击者或可劫持手机通讯基站
前言 在过去的几周时间里,我从多个方面对GSM的安全性进行了调查和研究,例如GSM通信协议中存在的漏洞.除此之外,我还对目前世界上应用最为广泛的BTS软件进行了安全审计.在这篇文章中,我将会给大家介绍 ...
- iOS AVCaptureSession 小视频开发总结,支持设备旋转
iOS开发中当我们想要自定义相机拍照或摄像界面时,UIImagePickerController无法满足我们的需求,这时候我们可以使用AVFoundation.framework这个framework ...
- iOS 截图功能
步骤: 当我们所需截的图的大小超过我们屏幕的大小时,可以用UIScrollView作为底图,这样就可以截图我们所需的大小,即 UIScrollView *scrollView = self.view. ...
- HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...
- 字符串数组转为PHP级数组
先要把字符串处理一下,成为php定义数组的形式,再用eval执行: $str="Array([15] => Array([id] => 2304[fromtype] => ...
- ThinkPHP 自动验证相关注意
1.假如加入了表单令牌的话,表单的各种名与对应Model字段一致,不然报坑爹的令牌错误. 2.假如加入了表单令牌的话,Create只能采用默认的POST数据创建数据对象,不然又是坑爹的令牌错误. 3. ...
- [GodLove]Wine93 Tarining Round #9
比赛链接: http://vjudge.net/contest/view.action?cid=48069#overview 题目来源: lrj训练指南---二维几何计算 ID Title Pro ...