兼容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;
}

  

原生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. Directx11教程(12) 禁止alt+enter全屏窗口

    原文:Directx11教程(12) 禁止alt+enter全屏窗口        在D3D11应用程序中,我们按下alt+enter键,会切换到全屏模式.有时候,我们在WM_SIZE中有一些代码,全 ...

  2. 面向视频的全新AI架构 —— 阿里云智能视觉技术全解

    我们都知道,AI技术正在以可见的速度被应用于各行各业,然而绝大部分业务场景想应用AI技术,都需要算法工程师根据自身业务的标注数据,来进行单独训练,才能打磨出合适的AI模型.如此一来,如何以最低的门槛和 ...

  3. Java8 日期、时间操作

    一.简介 在Java8之前,日期时间API一直被开发者诟病,包括:java.util.Date是可变类型,SimpleDateFormat非线程安全等问题.故此,Java8引入了一套全新的日期时间处理 ...

  4. Java练习 SDUT-3349_答答租车系统(面向对象综合练习)

    答答租车系统(面向对象综合练习) Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 各位面向对象的小伙伴们,在学习了面向对 ...

  5. 【datagrid】动态加载列 2016-01-03 16:32 2013人阅读 评论(19) 收藏

    之前我们的项目在前台显示只需要把数据从数据库读出来进行显示就可以,datagrid的表头字段都是写死的,把数据往表里一扔,就基本没什么事儿了,结果客户前几天要求,其中一个字段不能是死的,应该是有多少项 ...

  6. 算法导论笔记:18B树

    磁盘作为辅存,它的容量要比内存大得多,但是速度也要慢许多,下面就是磁盘的的结构图: 磁盘驱动器由一个或多个盘片组成,它们以固定的速度绕着主轴旋转,数据存储于盘片的表面,磁盘驱动器通过磁臂末尾的磁头来读 ...

  7. Header和Cookie相关内容

    相信很多同学都对HTTP的header和cookie,和session都有疑问,因为我们开发的时候一般都需要请求网络获取数据,有时候还需要带cookie或者带特殊的字段发起请求. 现在我们就来简单的了 ...

  8. 使用Laravel5做权限管理

    https://www.imooc.com/article/18250 关于权限管理的思考 最近在用laravel设计后台,后台需要有个权限管理.权限管理实质上分为两个部分,首先是认证,然后是权限.认 ...

  9. part11-LED驱动程序设计-part11.1-字符设备控制

  10. 2016国产开源软件Top100(Q1)

    2016国产开源软件Top100(Q1) 随着互联网的发展.开放标准的普及和虚拟化技术的应用等诸多IT新领域的创新及拓展,开源技术凭借其开放性.低成本.稳定性.灵活性.安全性和技术创新性等特点迅速走向 ...