常用原生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

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

(0)

相关推荐

  • Javascript selection的兼容性写法介绍

    复制代码 代码如下: function getSelectedText() { //this function code is borrowed from: http://www.codetoad.com/javascript_get_selected_text.asp var txt = ""; if (window.getSelection) { txt = window.getSelection(); } else if (window.document.getSelection

  • js事件源window.event.srcElement兼容性写法(详解)

    如下所示: <html> <body> <p>一个好处就是 我想让body(或其他元素内)的某些对象响应事件 就不用挨个儿去写 只要在外层上写一个 然后检查event.srcElement.tagName或其他属性是不是你想要的来决定是否响应事件就可以了.不过好像event.srcElement在ff里不起作用 </p> <p>比如</p> <p> <input value="input">

  • IE与Firefox下javascript getyear年份的兼容性写法

    IE与Firefox下javascript getyear年份不同浏览器 JavaScript 的getyear年份函数兼容性问题 先举个例子 用 Firefox 上一些网站会看到这样的提示 现在时间是 106年8月8日 而用 ie 浏览器的话就显示正常的 2006年8月8日 原因就是 javascript 的兼容性问题 var today = new date(); var year = today.getYear(); 在 Firefox 里面 getYear 返回的是 "当前年份-1900

  • 详解js几个绕不开的事件兼容写法

    本文介绍了详解js几个绕不开的事件兼容写法,分享给大家,具体如下: 1.键盘事件 keyCode 兼容性写法 var inp = document.getElementById('inp') var result = document.getElementById('result') function getKeyCode(e) { e = e ? e : (window.event ? window.event : "") return e.keyCode ? e.keyCode :

  • JS onkeypress兼容性写法详解

    要求实现输入密码后按回车,触发后台事件.看似十分简单的需求,可是却碰到不少难题啊. HTML内容中主要有一个密码输入文本框,还有一个按钮,用来触发后台事件. 1. TextBox文本框获得焦点后直接回车,页面会刷新.    经过代码仔细研究,原来是当页面中只有一个文本框控件时,当按回车健页面将刷新.    处理方法:在页面中加入一个隐藏的TextBox控件.    具体原理不明! 2. 用Jquery实现方法: $(document).ready(function(){ $("#tbPasswo

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

    就来总结一下简单的东西 备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了... ①添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 element.addEventListener(type, handler, false); }else if (element.attachEvent){//检测是否为IE级方法 ele

  • 常用原生js自定义函数总结

    js获取日期函数 //获取当前时间日期 function CurentTime() { var now = new Date(); var year = now.getFullYear(); //年 var month = now.getMonth() + 1; //月 var day = now.getDate(); //日 var hh = now.getHours(); //时 var mm = now.getMinutes(); //分 var clock = year + "-&quo

  • 解析原生JS getComputedStyle

    getComputedStyle 与getPropertyValue getComputedStyle 为何物呢,DOM 中 getComputedStyle 方法可用来获取元素中所有可用的css属性列表,以数组形式返回,并且是只读的.IE678 中则用 currentStyle 代替 . 假设我们页面上存在一个 id 为 id 的元素,那么使用getComputedStyle 获取元素样式就如下图所示: 尝试一下之后可以看到,window.getComputedStyle 获取的是所有的样式,

  • 原生js实现选项卡功能

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生js选项卡写法</title> <style> #div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;} .active{background: red;} &

  • 原生JS实现几个常用DOM操作API实例

    原生实现jQuery的sibling方法 <body> <span>我是span标签</span> <div>我是一个div</div> <h1 id="h1">我是标题</h1> <p>我是一个段落</p> <script type="text/javascript"> //获取元素的兄弟节点 function siblings(o){//参数o

  • 前端设计师们最常用的JS代码汇总

    逛社区时看到的文章,我修改调整了内容,如果大家觉得也有帮助 可以收藏下~ HTML5 DOM 选择器 // querySelector() 返回匹配到的第一个元素 var item = document.querySelector('.item'); console.log(item); // querySelectorAll() 返回匹配到的所有元素,是一个nodeList集合 var items = document.querySelectorAll('.item'); console.lo

  • 原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

    本文实例讲述了原生JS forEach()和map()遍历的区别.兼容写法及jQuery $.each.$.map遍历操作.分享给大家供大家参考,具体如下: 一.原生JS forEach()和map()遍历 共同点: ①.都是循环遍历数组中的每一项. ②.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. ③.匿名函数中的this都是指Window. ④.只能遍历数组. 1.forEach() 没有返回值

  • 原生JS中应该禁止出现的写法

    块级函数 严格模式下,在 ES6 之前应禁止使用.ES6 开始可以使用,函数的作用域为声明该函数的块内部.非严格模式下应禁止使用. if(true) { function test() { //块级函数 console.log(1); } } test(); 直接修改对象的 prototype 原型 浏览器对原型进行了优化,在调用实例之前,会为对象的方法提前规划内存位置.所以不可以直接修改 prototype 原型.以下两种方法都应禁止使用 使用 Object.setPrototypeOf 修改

  • 常用的JS验证和函数汇总

    下面是我常用一些JS验证和函数,有一些验证我直接写到了对象的属性里面了,可以直接通过对象.方法来调用 复制代码 代码如下: //浮点数除法运算 function fdiv(a, b, n) {     if (n == undefined) { n = 2; }     var t1 = 0, t2 = 0, r1, r2;     try { t1 = a.toString().split(".")[1].length } catch (e) { }     try { t2 = b

随机推荐