常用原生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 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
js定时器实例分享
Dec 20 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
使用vue制作滑动标签
Sep 21 Javascript
JS实现轮播图效果
Jan 11 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
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
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
Python3使用requests发闪存的方法
2016/05/11 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
python文件拆分与重组实例
2018/12/10 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
英文自荐信格式
2013/11/28 职场文书
法学院方阵解说词
2014/01/29 职场文书
护理不良事件检讨书
2014/02/06 职场文书
餐厅筹备计划书
2014/04/25 职场文书
公路绿化方案
2014/05/12 职场文书
实习单位鉴定意见
2015/06/04 职场文书
开学第一周总结
2015/07/16 职场文书
单位提档介绍信
2015/10/22 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL