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

      

  • 相关阅读:
    条款27: 如果不想使用隐式生成的函数就要显式地禁止它
    条款26: 当心潜在的二义性
    条款23: 必须返回一个对象时不要试图返回一个引用
    条款22: 尽量用“传引用”而不用“传值”
    条款21: 尽可能使用const
    【转】我的算法学习之路
    【转】基于Linux下的TCP编程
    条款十九: 分清成员函数,非成员函数和友元函数
    【c++】C语言中volatile关键字的作用
    innerHTML,innerText,outHTML,outText区别
  • 原文地址:https://www.cnblogs.com/wblx/p/10918823.html
Copyright © 2011-2022 走看看