zoukankan      html  css  js  c++  java
  • 原生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;
    }
    

      

  • 相关阅读:
    Android应用程序窗口(Activity)实现框架简要介绍和学习计划
    Android系统Surface机制的SurfaceFlinger服务简要介绍和学习计划
    《Android系统源代码情景分析》一书勘误
    Android应用程序窗口(Activity)的运行上下文环境(Context)的创建过程分析
    非IE内核浏览器支持activex插件
    让火狐浏览器可以访问含有activex控件网页的三种方式
    C++中delete和delete[]的区别
    动态加载JS脚本
    创建一个弹出DIV窗口
    C# 向下遍历删除子目录和子文件 及 向上遍历空的父目录
  • 原文地址:https://www.cnblogs.com/wblx/p/10918823.html
Copyright © 2011-2022 走看看