常用原生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 valueOf 使用方法
Dec 28 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 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
星际争霸秘籍
2020/03/04 星际争霸
解决CodeIgniter伪静态失效
2014/06/09 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
javascript模拟命名空间
2015/04/17 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
Python中的多重装饰器
2015/04/11 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
python中pdb模块实例用法
2021/01/15 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
人力资源管理系自荐信
2014/05/31 职场文书
出纳工作检讨书
2014/10/18 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
今日说法观后感
2015/06/08 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL