常用原生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 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 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数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
详谈js模块化规范
2017/07/07 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
应届中专生自荐书范文
2014/02/13 职场文书
年终晚会主持词
2014/03/25 职场文书
保护母亲河倡议书
2014/04/14 职场文书
校运会口号
2014/06/18 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技