原生js添加鼠标事件的兼容性写法

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

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

function addEvent(_target,eventType,fnHandler,useCapture){useCapture==undefined?useCapture=true:"";var touchable,isSurface,msPointerable;try{ msPointerable = window.navigator.msPointerEnabled?true:false; }catch(e){ msPointerable=false; }try{ touchable = ("ontouchstart" in document &&  !isPC()) ? true : false; }catch(e){ touchable=false; }try{ isSurface = ("ontouchstart" in document && isPC()) ? true : false }catch(e){ isSurface=false }var oEventType = null;if(msPointerable){switch(eventType){case "mousedown":eventType="MSPointerDown";break;case "mousemove":eventType="MSPointerMove";break;case "mouseup":eventType="MSPointerUp";break;case "mouseover":eventType="MSPointerOver";break;case "mouseout":eventType="MSPointerOut";break;}}else if(touchable){switch(eventType){case "mousedown":eventType="touchstart";break;case "mousemove":eventType="touchmove";break;case "mouseup":eventType="touchend";break;case "mouseover":eventType="";break;case "mouseout":eventType="";break;}}if(isSurface){switch(eventType){case "mousedown":oEventType="touchstart";break;case "mousemove":oEventType="touchmove";break;case "mouseup":oEventType="touchend";break;case "mouseover":oEventType="";break;case "mouseout":oEventType="";break;}  }if(eventType==""){return;}if (_target.addEventListener) {_target.addEventListener(eventType, fnHandler,useCapture);} else if (_target.attachEvent) {_target.attachEvent("on" + eventType, fnHandler);} else {_target["on" + eventType] = fnHandler;}if(!!oEventType){if (_target.addEventListener) {_target.addEventListener(oEventType, fnHandler,useCapture);} else if (_target.attachEvent) {_target.attachEvent("on" + oEventType, fnHandler);} else {_target["on" + oEventType] = fnHandler;}}
}
function removeEvent(_target, eventType, fnHandler,useCapture){useCapture==undefined?useCapture=true:"";var touchable,isSurface,msPointerable;try{ msPointerable = window.navigator.msPointerEnabled?true:false; }catch(e){ msPointerable=false; }try{ touchable = ("ontouchstart" in document &&  !isPC()) ? true : false; }catch(e){ touchable=false; }try{ isSurface = ("ontouchstart" in document && isPC()) ? true : false }catch(e){ isSurface=false }var oEventType = null;if(msPointerable){switch(eventType){case "mousedown":eventType="MSPointerDown";break;case "mousemove":eventType="MSPointerMove";break;case "mouseup":eventType="MSPointerUp";break;case "mouseover":eventType="MSPointerOver";break;case "mouseout":eventType="MSPointerOut";break;}}else if(touchable){switch(eventType){case "mousedown":eventType="touchstart";break;case "mousemove":eventType="touchmove";break;case "mouseup":eventType="touchend";break;case "mouseover":eventType="";break;case "mouseout":eventType="";break;}}if(isSurface){switch(eventType){case "mousedown":oEventType="touchstart";break;case "mousemove":oEventType="touchmove";break;case "mouseup":oEventType="touchend";break;case "mouseover":oEventType="";break;case "mouseout":oEventType="";break;} }if (_target.removeEventListener) {_target.removeEventListener(eventType, fnHandler,useCapture);} else if (_target.detachEvent) {_target.detachEvent("on" + eventType, fnHandler);} else {_target["on" + eventType] = null;}if(!!oEventType){if (_target.removeEventListener) {_target.removeEventListener(oEventType, fnHandler,useCapture);} else if (_target.detachEvent) {_target.detachEvent("on" + oEventType, fnHandler);} else {_target["on" + oEventType] = null;}}
}
function isPC() {var userAgentInfo = navigator.userAgent;var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];var flag = true;for (var v = 0; v < Agents.length; v++) {if (userAgentInfo.indexOf(Agents[v]) > 0) {flag = false;break;}}return flag;
}

转载于:https://www.cnblogs.com/wblx/p/10918823.html

原生js添加鼠标事件的兼容性写法相关推荐

vuejs 原生JS 拖拽事件案例
原生JS or Vue 事件案例合集(详细) 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 Section 1 单个或多个鼠标拖拽事件的理解提示:写完文章后,目录可以自动生成,如 ...
java 中鼠标事件_[Java教程]js中鼠标事件总结
[Java教程]js中鼠标事件总结 0 2017-07-11 00:00:19 js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblc ...
原生js添加动画效果
原生js添加动画效果 html 这个图片是使用阿里图标需要下载 <div class="content"><div class="contAnimati ...
百度地图只显示某个省自定义标注点添加鼠标事件
小白初试,这里用广西省为例,但是感觉百度地图加载属实有点慢=.= 以下是完整代码 <!DOCTYPE html> <html lang="en"> < ...
jQuery学习（四）— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...
原生JS javascript解除绑定事件 JS删除绑定事件
原生JS javascript解除绑定事件 JS删除绑定事件一.直接删除法 1.适用于直接绑定的事件,如: <h1 id="h1" onclick="_click ...
原生JS实现鼠标按下拖拽效果
原生JS实现鼠标按下拖拽效果 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
原生JS添加节点的方法
一 . 原理 insertAdjacentHTML() 原生js添加节点二.代码 <!DOCTYPE html> <html><head><meta cha ...
原生js添加节点(字符串形式)
原生js添加节点(字符串形式) MDN地址查看方法描述 element.insertAdjacentHTML(position, text); element:要追加的元素 position:追加在目 ...
在原生js中的事件监听方法
一.传统事件绑定方法我们在学习的时候,最初接触的事件绑定方式大多是传统事件绑定方法.传统事件绑定方法事例如下: window.οnlοad=function(){alert("页面已加载& ...

原生js添加鼠标事件的兼容性写法

原生js添加鼠标事件的兼容性写法相关推荐

最新文章

热门文章