原生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;
}
原生js添加鼠标事件的兼容性写法的更多相关文章
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- 原生js添加和删除类
原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...
- 原生js添加博客点击鼠标出小心心效果~~
昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...
- 原生js自动触发事件
熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...
- 原生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 ...
- 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...
- 原生JS添加节点方法与jQuery添加节点方法的比较及总结
一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...
- 61.H5---利用canvas+原生js进行鼠标跟随绘图
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- 原生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 ...
随机推荐
- oralce触发器
n 触发器的分类 DML(insert,delete,update)触发器 DDL(create table ,create view...drop...)触发器 系统触发器(与系统相关的触发器,比 ...
- linux 下 自己写的 html文件产生中文乱码问题 解决办法
再文件顶部加上 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" / ...
- hdu2176 尼姆博弈
如果 a1^a2^a3........^an=0,必败态. 如果 a1^a2^a3........^an!=0,必胜态. 对于必胜态,若a1^a2^a3........^an=k,要让对方为必败态,所 ...
- Java练习 SDUT-3081_谁是最强女汉子
谁是最强的女汉子 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 众所周知,一年一度的女汉子大赛又来啦.由于最近女汉子比 ...
- 洛谷 1463[SDOI2005] 反素数ant
题目描述 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例如,整数1,2,4,6 ...
- Nuxt.js打造旅游网站第3篇_登录页面的编写
主要知识点: 1.使用vuex/store管理数据 2.登录注册逻辑 3.Nuxt的本地存储 1.登录页面 1.1登录页面布局 替换pages/user/login.vue的代码如下 <temp ...
- SQL if语句简要
if语句 可以作为表达式用 可以在存储过程中作为流程控制语句用 表达式 IF(条件,条件true,条件false) 示例 sex字段m,f 互换 update salary set sex = if( ...
- Python基础:06条件和循环
1:条件表达式(三元操作符) Python 在很长的一段时间里没有条件表达式(C ? X : Y), 或称三元运算符.人们试着用 and 和 or 来模拟它, 但大多都是错误的. 根据 FAQ , 正 ...
- SQL注入原理讲解,很不错!
SQL注入原理讲解,很不错! 原文地址:http://www.cnblogs.com/rush/archive/2011/12/31/2309203.html 1.1.1 摘要 日前,国内最大的程序员 ...
- Jmeter If控制器
"${xxx}"=="1" 或者 "${xxx}"!="2"