原生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 ...
随机推荐
- R语言处理Web数据
R语言处理Web数据 许多网站提供的数据,以供其用户的消费.例如,世界卫生组织(WHO)提供的CSV,TXT和XML文件的形式的健康和医疗信息报告.基于R程序,我们可以通过编程提取这些网站的具体数据. ...
- Mysql主从安装配置
Mysql主从安装配置 环境: 主从服务器上的MySQL数据库版本同为5.1.34 主机IP:192.168.0.1 从机IP:192.168.0.2 一. MySQL主服务器配置 1.编辑配置 ...
- dialog的进度条
import android.app.Activity; import android.app.ProgressDialog; import android.os.Bundle; import and ...
- nodeJs学习-19 个人博客案例-(1)数据字典
智能社视频27.28 数据字典: 定义: url 300字 admin_table 管理员用户表 ID username varchar(32) password varchar(32) banner ...
- python小练习--银行取款
银行取款 今天练习的小程序: #!/usr/bin/env python #-*- coding:utf-8 -*- import time tag=True while tag: name=inpu ...
- java 使用poi导出Excel,设置单元格保护不可编辑
//sheet表加密:等效excel的审阅菜单下的保护工作表 sheet.protectSheet(new String("333"));//333是密码 更多设置请参考:http ...
- oracle管理索引
索引是用于加速数据存取的数据对象,合理的使用索引可以大大降低I/O次数,从而提高数据访问性能.索引有很多种我们主要介绍常用的几种: 为什么添加了索引或,会加快查询速度呢? n 单列索引 单列索引是基 ...
- Length of Last Word输出最后单词的字母个数
Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...
- [java]struts2 模型驱动 2016-05-01 21:40 702人阅读 评论(19) 收藏
一开始敲网上商城的时候,对于数据的传递方式我是很惊艳了一把的,感觉特别高大上,就感觉,竟然不用像.net一样取谁的值,给谁赋值这样,只要需要用的时候,简单的get一下就ok了,简直高大上啊. 然后发现 ...
- dva与create-react-app的结合使用
dva与我们的create-react-app创建的两款脚手架是我们写react项目的两款优秀框架,之前一种使用create-react-app这款脚手架进行开发.然后这个框架美中不足的是redux方 ...