原生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 ...
随机推荐
- 洛谷 P1505 [国家集训队]旅游 树链剖分
目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例: 输出样例: 说明 思路 AC代码 总结 题面 题目链接 P1505 [国家集训队]旅游 题目描述 Ray 乐 ...
- react-jd-index
看见一些代码的产物,会觉得非常的漂亮~感谢无私开源的程序员们~你们是最可爱的人儿~~ //index.jsx require('./app/lib/common.css'); import React ...
- (译)Objective-C的动态特性
这是一篇译文,原文在此,上一篇文章就是受这篇文章启发,这次干脆都翻译过来. 过去的几年中涌现了大量的Objective-C开发者.有些是从动态语言转过来的,比如Ruby或Python,有些是从强类型 ...
- 洛谷 P2568 GCD(莫比乌斯反演)
题意:$\sum_{i=1}^{n}\sum_{j=1}^{n}[gcd(i,j)\epsilon prime]$. 对于这类题一般就是枚举gcd,可得: =$\sum_{d\epsilon prim ...
- POJ - 1679_The Unique MST
The Unique MST Time Limit: 1000MS Memory Limit: 10000K Description Given a connected undirected grap ...
- Android EditText____TextchangedListener
今天在做APP的时候有个需求: EditText 动态监听内容变化如果长度为6时(就是看是不是验证码) 判断是否正确 正确就跳到下一个Activity,但是在Activity.finish()的时候, ...
- Java练习 SDUT-1184_拍皮球
C语言实验--拍皮球 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 小瑜3岁了,很喜欢玩皮球,看来今后喜欢打篮球的^_ ...
- MySQL性能分析, mysql explain执行计划详解
MySQL性能分析 MySQL性能分析及explain用法的知识是本文我们主要要介绍的内容,接下来就让我们通过一些实际的例子来介绍这一过程,希望能够对您有所帮助. 1.使用explain语句去查看分析 ...
- DataTable CAST 成集合后,进行自定义排序再转换回DataTable
dt = dt.Rows.Cast<DataRow>().OrderBy(r => Convert.ToInt32(r["数量"])==0?1:0).ThenBy ...
- CRT (C run-time library)
一 产生 运行时库是程序在运行时所需要的库文件,通常以LIB或DLL形式提供. C运行时库就是C run-time library,诞生于20世纪70年代,是C而非C++语言世界的概念,C程序运行时需 ...