热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

常用原生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 &#63;
   -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

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


推荐阅读
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 本文基于对相关论文和开源代码的研究,详细介绍了LOAM(激光雷达里程计与建图)的工作原理,并对其关键技术进行了分析。 ... [详细]
  • 资源推荐 | TensorFlow官方中文教程助力英语非母语者学习
    来源:机器之心。本文详细介绍了TensorFlow官方提供的中文版教程和指南,帮助开发者更好地理解和应用这一强大的开源机器学习平台。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 构建基于BERT的中文NL2SQL模型:一个简明的基准
    本文探讨了将自然语言转换为SQL语句(NL2SQL)的任务,这是人工智能领域中一项非常实用的研究方向。文章介绍了笔者在公司举办的首届中文NL2SQL挑战赛中的实践,该比赛提供了金融和通用领域的表格数据,并标注了对应的自然语言与SQL语句对,旨在训练准确的NL2SQL模型。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 数据库内核开发入门 | 搭建研发环境的初步指南
    本课程将带你从零开始,逐步掌握数据库内核开发的基础知识和实践技能,重点介绍如何搭建OceanBase的开发环境。 ... [详细]
  • 本文介绍如何使用 Sortable.js 库实现元素的拖拽和位置交换功能。Sortable.js 是一个轻量级、无依赖的 JavaScript 库,支持拖拽排序、动画效果和多种插件扩展。通过简单的配置和事件处理,可以轻松实现复杂的功能。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 探讨一个显示数字的故障计算器,它支持两种操作:将当前数字乘以2或减去1。本文将详细介绍如何用最少的操作次数将初始值X转换为目标值Y。 ... [详细]
  • 如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ... [详细]
  • 扫描线三巨头 hdu1928hdu 1255  hdu 1542 [POJ 1151]
    学习链接:http:blog.csdn.netlwt36articledetails48908031学习扫描线主要学习的是一种扫描的思想,后期可以求解很 ... [详细]
  • 本文详细介绍了如何在 Spring Boot 应用中通过 @PropertySource 注解读取非默认配置文件,包括配置文件的创建、映射类的设计以及确保 Spring 容器能够正确加载这些配置的方法。 ... [详细]
  • This document outlines the recommended naming conventions for HTML attributes in Fast Components, focusing on readability and consistency with existing standards. ... [详细]
author-avatar
我是风一样的我们
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有