当前位置: 首页 > 编程笔记 >

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

焦兴为
2023-03-14
本文向大家介绍常用原生JS兼容性写法汇总,包括了常用原生JS兼容性写法汇总的使用技巧和注意事项,需要的朋友参考一下

就来总结一下简单的东西

备注:一下的方法都是包裹在一个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

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

 类似资料:
  • 我目前正在使用gradle,似乎可以通过java插件设置sourcecompatibility和targetcompatibility 我想知道除了与旧的JDK向后兼容之外,我们使用sourcecompatibility/targetcompatibility的原因是什么? 如果没有设置sourcecompatibility/targetcompatibility,升级到最新的java会更容易吗?

  • custom-tab-bar Mpx 支持微信小程序原生自定义 tabbar ,关于自定义 tabbar 的详情请查看这里 在 Mpx 中使用自定义 tabbar ,需要在 app.mpx 的 json 部分的 tabBar 配置里的 custom 为 true 。 // app.mpx <script type="application/json"> { "tabBar": { "c

  • vue-amap 能够抛开高德原生 SDK 覆盖大多数场景,但对于部分定制化程度较高的场景而言,可能还是需要引入高德原生 SDK 来支持。这章将介绍如何在 vue-amap 中使用高德 SDK。 实例方式 对于大多数 vue-amap 组件,都有 init 这个 event,参数为高德的实例,通过这样暴露高德实例的方式,开发者能够非常自由地将原生 SDK 和 vue-amap 结合起来使用。 这里

  • 本章提供了有关 版本控制 章节中提供的破坏性和非破坏性修改列表的详细说明。 什么算是一个破坏性(不兼容)的变化并没有明确的定义。本指南应该被视为指示性的,而不是每一种可能变化的全面清单。 这里列出的规则只涉及客户端兼容性。预期API生产者明白在部署方面的要求,包括实现细节的变化。 一般目的是,服务端更新到一个新的minor版本或patch版本不该破坏客户端。可预期的破坏类型有: 源代码兼容性:针对

  • 语言补丁 Array.isArray Object.assign JSON.stringify console-polyfill Object.keys Object.is Array.prototype.forEach Function.prototype.bind 或者直接使用https://polyfill.io/ 提供的动态补丁方案 <script src="https://cdn.pol

  • 本文向大家介绍基于原生js淡入淡出函数封装(兼容IE),包括了基于原生js淡入淡出函数封装(兼容IE)的使用技巧和注意事项,需要的朋友参考一下 在开发的过程中,我们要做淡入淡出效果的话,我们完全可以使用jQuery的fadeTo()方法。但是我们的目的不只是会用,而是理解程序底层的逻辑。这篇文章主要就是利用原生的javascript实现淡入淡出的效果。 构建框架,基本没难度。 编写javascri

  • 本文向大家介绍原生js编写autoComplete插件,包括了原生js编写autoComplete插件的使用技巧和注意事项,需要的朋友参考一下 最近有提关于下拉选项过多的时候,希望输入关键词,可以搜索内容的需求,但是之前项目太赶,所以也就没有来得及做,因为希望用原生js写一些内容,所以插件是采用了原生js写的思路如下 第一步:fnInit实现初始化一些字段 第二步:加载搜索框的div 第三步:实现

  • 本文向大家介绍highcharts 兼容性,包括了highcharts 兼容性的使用技巧和注意事项,需要的朋友参考一下 示例 牌 支持的版本 IE浏览器 6.0 + 火狐浏览器 2.0以上 铬 1.0 + 苹果浏览器 4.0以上 歌剧 9.0 + iOS(Safari) 3.0 + Android浏览器 2.0以上 Highcharts支持旧版浏览器的jQuery 1.6+版本,以及现代浏览器的2