常用原生JS兼容性写法汇总


Posted in Javascript onApril 27, 2016

就来总结一下简单的东西

备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了。。。

①添加事件方法

addHandler:function(element,type,handler){
 if(element.addEventListener){//检测是否为DOM2级方法
  element.addEventListener(type, handler, false);
 }else if (element.attachEvent){//检测是否为IE级方法
  element.attachEvent("on" + type, handler);
 } else {//检测是否为DOM0级方法
  element["on" + type] = handler;
 }
}

②移除之前添加的事件方法

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){
  return event ? event : window.event;
 },
 //获取事件对象目标的兼容性写法
 getTarget: function(event){
  return event.target || event.srcElement;
 }

④阻止浏览器默认事件的兼容性写法

preventDefault: function(event){
  if (event.preventDefault){
   event.preventDefault();
  } else {
   event.returnValue = false;
  }
 }

⑤阻止事件冒泡的兼容性写法

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

⑥mouseover和mouseout 事件才包含的获取相关元素的方法

//mouseover和mouseout 事件才包含的获取相关元素的方法
getRelatedTarget: function(event){
 if (event.relatedTarget){
  return event.relatedTarget;
 } else if (event.toElement){
  return event.toElement;
 } else if (event.fromElement){
  return event.fromElement;
 } else {
  return null;
 }
}

⑦鼠标滚轮判断

对于mousedown 和mouseup 事件来说,则在其event 对象存在一个button 属性,
表示按下或释放的按钮。DOM的button 属性可能有如下3 个值:0 表示主鼠标按钮,1 表示中间的鼠
标按钮(鼠标滚轮按钮),2 表示次鼠标按钮。在常规的设置中,主鼠标按钮就是鼠标左键,而次鼠标
按钮就是鼠标右键。
IE8 及之前版本也提供了button 属性,但这个属性的值与DOM 的button 属性有很大差异。
 0:表示没有按下按钮。
 1:表示按下了主鼠标按钮。
 2:表示按下了次鼠标按钮。
 3:表示同时按下了主、次鼠标按钮。
 4:表示按下了中间的鼠标按钮。
 5:表示同时按下了主鼠标按钮和中间的鼠标按钮。
 6:表示同时按下了次鼠标按钮和中间的鼠标按钮。
 7:表示同时按下了三个鼠标按钮。

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;
  }
 }
}

⑧能够取得鼠标滚轮增量值(delta)的方法

getWheelDelta: function(event){
 if (event.wheelDelta){
  return (client.engine.opera && client.engine.opera < 9.5 ?
   -event.wheelDelta : event.wheelDelta);
 } else {
  return -event.detail * 40;//firefox中的值为+3表示向上滚,-3表示向下滚
 }
}

⑨跨浏览器的方式取得字符编码

getCharCode: function(event){
 if (typeof event.charCode == "number"){
  return event.charCode;
 } else {
  return event.keyCode;
 }
}

⑩访问剪贴板中的数据

getClipboardText: function(event){
  var clipboardData = (event.clipboardData || window.clipboardData);
  return clipboardData.getData("text");
 }

11.设置剪贴板中的数据

setClipboardText: function(event, value){
  if (event.clipboardData){
   return event.clipboardData.setData("text/plain", value);
  } else if (window.clipboardData){
   return window.clipboardData.setData("text", value);
  }
 }

封装一下,然后就可以直接用了。

完整文件及更多CSS、LESS基础重置样式见:https://github.com/LuckyWinty/resetFile

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 #Javascript
跨域资源共享 CORS 详解
Apr 26 #Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 #Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 #Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 #Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 #Javascript
深入理解JS中的substr和substring
Apr 26 #Javascript
You might like
删除数组元素实用的PHP数组函数
2008/08/18 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
axios如何取消重复无用的请求详解
2019/12/15 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python压缩和解压缩zip文件
2015/02/14 Python
python实现多线程抓取知乎用户
2016/12/12 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
保卫科工作岗位职责
2014/03/01 职场文书
公司经理任命书
2014/06/05 职场文书
公司捐书倡议书
2015/04/27 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书