就来总结一下简单的东西
备注:一下的方法都是包裹在一个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