兼容pc和移动端，还兼容了surface平板。

surface平板特别坑，既可以用鼠标也能用触摸屏，也就是说同时有touch事件和mouse事件。

  1. function addEvent(_target,eventType,fnHandler,useCapture){
  2. 	useCapture==undefined?useCapture=true:"";
  3. 	var touchable,isSurface,msPointerable;
  4. 	try{ msPointerable = window.navigator.msPointerEnabled?true:false; }catch(e){ msPointerable=false; }
  5. 	try{ touchable = ("ontouchstart" in document &&  !isPC()) ? true : false; }catch(e){ touchable=false; }
  6. 	try{ isSurface = ("ontouchstart" in document && isPC()) ? true : false }catch(e){ isSurface=false }
  7. 	var oEventType = null;
  8. 	if(msPointerable){
  9. 		switch(eventType){
  10. 			case "mousedown":
  11. 				eventType="MSPointerDown";
  12. 				break;
  13. 			case "mousemove":
  14. 				eventType="MSPointerMove";
  15. 				break;
  16. 			case "mouseup":
  17. 				eventType="MSPointerUp";
  18. 				break;
  19. 			case "mouseover":
  20. 				eventType="MSPointerOver";
  21. 				break;
  22. 			case "mouseout":
  23. 				eventType="MSPointerOut";
  24. 				break;
  25. 		}
  26. 	}else if(touchable){
  27. 		switch(eventType){
  28. 			case "mousedown":
  29. 				eventType="touchstart";
  30. 				break;
  31. 			case "mousemove":
  32. 				eventType="touchmove";
  33. 				break;
  34. 			case "mouseup":
  35. 				eventType="touchend";
  36. 				break;
  37. 			case "mouseover":
  38. 				eventType="";
  39. 				break;
  40. 			case "mouseout":
  41. 				eventType="";
  42. 				break;
  43. 		}
  44. 	}
  45. 	if(isSurface){
  46. 		switch(eventType){
  47. 			case "mousedown":
  48. 				oEventType="touchstart";
  49. 				break;
  50. 			case "mousemove":
  51. 				oEventType="touchmove";
  52. 				break;
  53. 			case "mouseup":
  54. 				oEventType="touchend";
  55. 				break;
  56. 			case "mouseover":
  57. 				oEventType="";
  58. 				break;
  59. 			case "mouseout":
  60. 				oEventType="";
  61. 				break;
  62. 		}
  63. 	}
  64. 	if(eventType==""){
  65. 		return;
  66. 	}
  67. 	if (_target.addEventListener) {
  68. 		_target.addEventListener(eventType, fnHandler,useCapture);
  69. 	} else if (_target.attachEvent) {
  70. 		_target.attachEvent("on" + eventType, fnHandler);
  71. 	} else {
  72. 		_target["on" + eventType] = fnHandler;
  73. 	}
  74. 	if(!!oEventType){
  75. 		if (_target.addEventListener) {
  76. 			_target.addEventListener(oEventType, fnHandler,useCapture);
  77. 		} else if (_target.attachEvent) {
  78. 			_target.attachEvent("on" + oEventType, fnHandler);
  79. 		} else {
  80. 			_target["on" + oEventType] = fnHandler;
  81. 		}
  82. 	}
  83. }
  84. function removeEvent(_target, eventType, fnHandler,useCapture){
  85. 	useCapture==undefined?useCapture=true:"";
  86. 	var touchable,isSurface,msPointerable;
  87. 	try{ msPointerable = window.navigator.msPointerEnabled?true:false; }catch(e){ msPointerable=false; }
  88. 	try{ touchable = ("ontouchstart" in document &&  !isPC()) ? true : false; }catch(e){ touchable=false; }
  89. 	try{ isSurface = ("ontouchstart" in document && isPC()) ? true : false }catch(e){ isSurface=false }
  90. 	var oEventType = null;
  91. 	if(msPointerable){
  92. 		switch(eventType){
  93. 			case "mousedown":
  94. 				eventType="MSPointerDown";
  95. 				break;
  96. 			case "mousemove":
  97. 				eventType="MSPointerMove";
  98. 				break;
  99. 			case "mouseup":
  100. 				eventType="MSPointerUp";
  101. 				break;
  102. 			case "mouseover":
  103. 				eventType="MSPointerOver";
  104. 				break;
  105. 			case "mouseout":
  106. 				eventType="MSPointerOut";
  107. 				break;
  108. 		}
  109. 	}else if(touchable){
  110. 		switch(eventType){
  111. 			case "mousedown":
  112. 				eventType="touchstart";
  113. 				break;
  114. 			case "mousemove":
  115. 				eventType="touchmove";
  116. 				break;
  117. 			case "mouseup":
  118. 				eventType="touchend";
  119. 				break;
  120. 			case "mouseover":
  121. 				eventType="";
  122. 				break;
  123. 			case "mouseout":
  124. 				eventType="";
  125. 				break;
  126. 		}
  127. 	}
  128. 	if(isSurface){
  129. 		switch(eventType){
  130. 			case "mousedown":
  131. 				oEventType="touchstart";
  132. 				break;
  133. 			case "mousemove":
  134. 				oEventType="touchmove";
  135. 				break;
  136. 			case "mouseup":
  137. 				oEventType="touchend";
  138. 				break;
  139. 			case "mouseover":
  140. 				oEventType="";
  141. 				break;
  142. 			case "mouseout":
  143. 				oEventType="";
  144. 				break;
  145. 		}
  146. 	}
  147. 	if (_target.removeEventListener) {
  148. 		_target.removeEventListener(eventType, fnHandler,useCapture);
  149. 	} else if (_target.detachEvent) {
  150. 		_target.detachEvent("on" + eventType, fnHandler);
  151. 	} else {
  152. 		_target["on" + eventType] = null;
  153. 	}
  154. 	if(!!oEventType){
  155. 		if (_target.removeEventListener) {
  156. 			_target.removeEventListener(oEventType, fnHandler,useCapture);
  157. 		} else if (_target.detachEvent) {
  158. 			_target.detachEvent("on" + oEventType, fnHandler);
  159. 		} else {
  160. 			_target["on" + oEventType] = null;
  161. 		}
  162. 	}
  163. }
  164. function isPC() {
  165. 	var userAgentInfo = navigator.userAgent;
  166. 	var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];
  167. 	var flag = true;
  168. 	for (var v = 0; v < Agents.length; v++) {
  169. 		if (userAgentInfo.indexOf(Agents[v]) > 0) {
  170. 			flag = false;
  171. 			break;
  172. 		}
  173. 	}
  174. 	return flag;
  175. }

　　

原生js添加鼠标事件的兼容性写法的更多相关文章

  1. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  2. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  3. 原生js添加博客点击鼠标出小心心效果~~

    昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...

  4. 原生js自动触发事件

    熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...

  5. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  6. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  7. 原生JS添加节点方法与jQuery添加节点方法的比较及总结

    一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...

  8. 61.H5---利用canvas+原生js进行鼠标跟随绘图

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

随机推荐

  1. iOS 微信支付如果遇到跳转只有一个确定请看这里

    http://www.cocoachina.com/bbs/read.php?tid-321546.html 今天在联调微信支付,不得不说,和它比起来,阿里的支付sdk真的是太好用了.果然和后端同学在 ...

  2. Leetcode744.Find Smallest Letter Greater Than Target寻找比目标字母大的最小字母

    给定一个只包含小写字母的有序数组letters 和一个目标字母 target,寻找有序数组里面比目标字母大的最小字母. 数组里字母的顺序是循环的.举个例子,如果目标字母target = 'z' 并且有 ...

  3. Oracle使用——Oracle表字段的增加、删除、修改和重命名

    增加字段 语法 alter table tablename add (column datatype [default value][null/not null]); 说明:alter table 表 ...

  4. java中URLEncode和URLDecode

    URLEncode和URLDecode用于完成普通字符串和 application/x-www-from-urlencoded MIME字符串之间的相互转化 如果传递的字符串中包含非西欧字符的字符串, ...

  5. JavaScript中操作数组的方法

    JavaScript Array 对象 对数组操作的方法分为两种 一种是会改变原始数组的变异方法,还有一种是不会改变原始数组的非变异方法. 总结 巧记 Push() 尾部添加 pop() 尾部删除 U ...

  6. TIJ——Chapter Twelve:Error Handling with Exception

    Exception guidelines Use exceptions to: Handle problems at the appropriate level.(Avoid catching exc ...

  7. Android 高仿微信支付键盘

    现在很多app的支付.输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便.其效果着实精致. 下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中. 先看下效果图: 1. 自定 ...

  8. oralce GROUPING

    /*从上面的结果中我们很容易发现,每个统计数据所对应的行都会出现null, 如何来区分到底是根据那个字段做的汇总呢,grouping函数判断是否合计列!*/ select decode(groupin ...

  9. Java练习 SDUT-1704_统计数字问题

    统计数字问题 Time Limit: 1000 ms Memory Limit: 32768 KiB Problem Description 一本书的页码从自然数1 开始顺序编码直到自然数n.书的页码 ...

  10. jQuery 滑动

    jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() slideUp() slideToggle() jQuery sli ...