iOS/IE10触摸事件兼容鼠标事件

时间:2014-07-22 19:35 来源: 我爱IT技术网作者:山风

一、工作需求：

如果公司要求你将普通桌面版页面的所有鼠标事件处理快速切换到IOS或者使用IE10的WindowPhone移动设备对应的触摸事件，让之前的桌面版在移动设备也能使用，该如何做。

二、解决方案：

假设我之前的页面功能为按住“Test Me”按钮并移动鼠标，能在id为“output”的span标签中输出当前鼠标的实时坐标，直至松开“Test Me”按钮。

1.在页面引入两个js，分别为t_m.js，t_m_Bind.js，

如下：

<body> 
<p><a id="myButton" href="#">Test Me</a></p> 
<span id="output"></span> 
<script type="text/javascript" src="local/t_m.js"></script> 
<script type="text/javascript" src="local/t_m_Bind.js"></script> 
</body>

2.将以前的mouseDown，mouseMove，mouseUp的事件处理迁移至t_m.js红色标注的相应位置。

三、js代码：

1.t_m.js

//监听touch/mouse事件的DOM元素 
 
target = document.getElementById('myButton'); 
 
function DoEvent(eventObject) { 
 
/*

屏蔽事件默认行为--防止其拖动或缩放行为

1.ie10 + ：preventManipulation

2.ios 以及其他deskTop ： preventDefault

*/ 
 
if (eventObject.preventManipulation) eventObject.preventManipulation(); 
 
if (eventObject.preventDefault) eventObject.preventDefault(); 
 
/*

获取多点触控的事件参数

1.ios : eventObject.changedTouches

2.deskTop ： eventObject

*/ 
 
var touchPoints = (typeof eventObject.changedTouches != 'undefined') ? eventObject.changedTouches : [eventObject]; 
 
for (var i = 0; i < touchPoints.length; ++i) { 
 
var touchPoint = touchPoints[i]; 
 
/*

获取操控点的标识

1.ios ： touchPoint.identifier

2.ie10 (触屏)： pointerId

3.deskTop：不可能出现多点，默认为1个点

*/ 
 
var touchPointId = (typeof touchPoint.identifier != 'undefined') ? touchPoint.identifier 
 
: (typeof touchPoint.pointerId != 'undefined') ? touchPoint.pointerId : 1; 
 
// 触屏与deskTop事件兼容[ mousedown, MSPointerDown, and touchstart] 
 
if (eventObject.type.match(/(down|start)$/i)) { 
 
//重新绑定mousemove，mouseup，移出目标对象保证还能实时调用mousemove，mouseup处理函数 
 
if (target.msSetPointerCapture) target.msSetPointerCapture(pointerId); 
 
else if (eventObject.type == "mousedown") { 
 
if (useSetReleaseCapture) target.setCapture(true); 
 
else { 
 
//监听对象改为document 
 
document.addEventListener("mousemove", DoEvent, false); 
 
document.addEventListener("mouseup", DoEvent, false); 
 
} 
 
} 
 
/*原来MouseDown的业务逻辑放置在此处 
 
代码....... 
 
*/ 
 
}// 触屏与deskTop事件兼容 mousemove, MSPointerMove, and touchmove 
 
else if (eventObject.type.match(/move$/i)) { 
 
/*原来MouseMove的业务逻辑放置在此处 
 
代码....... 
 
*/ 
 
var output = document.getElementById("output"); 
 
output.innerHTML = "Position: " + eventObject.clientX + ", " + eventObject.clientY; 
 
}// 触屏与deskTop事件兼容 mouseup, MSPointerUp, and touchend 
 
else if (eventObject.type.match(/(up|end)$/i)) { 
 
/*原来MouseDown的业务逻辑放置在此处 
 
代码....... 
 
*/ 
 
//删除绑定 
 
if (target.msReleasePointerCapture) target.msReleasePointerCapture(pointerId); 
 
else if (eventObject.type == "mouseup") { 
 
if (useSetReleaseCapture) target.releaseCapture(); 
 
else { 
 
document.removeEventListener("mousemove", DoEvent, false); 
 
document.removeEventListener("mouseup", DoEvent, false); 
 
} 
 
} 
 
} 
 
} 
 
}

2.t_m_Bind.js

/*

依赖：

1.t_m.js,使用其事件的处理函数DoEvent,以及target[全局]

功能：

1.绑定触控点事件，当用客户端不支持退化到mouse相关事件

*/ 
 
//外抛一个全局变量比DoEvent使用 
 
useSetReleaseCapture = false; 
 
var t_m_Bind = { 
 
useSetReleaseCapture : false 
 
//绑定事件， 
 
,bindEvent : function(){ 
 
var self = this; 
 
//IE10 触控点事件，只针对IE10触屏 
 
if (window.navigator.msPointerEnabled) { 
 
target.addEventListener("MSPointerDown", DoEvent, false); 
 
target.addEventListener("MSPointerMove", DoEvent, false); 
 
target.addEventListener("MSPointerUp", DoEvent, false); 
 
target.addEventListener("MSPointerCancel", DoEvent, false); 
 
// css way to prevent panning in our target area 
 
if (typeof target.style.msContentZooming != 'undefined') 
 
target.style.msContentZooming = "none"; 
 
// new in Windows Consumer Preview: css way to prevent all built-in touch actions on our target 
 
// without this, you cannot touch draw on the element because IE will intercept the touch events 
 
if (typeof target.style.msTouchAction != 'undefined') target.style.msTouchAction = "none"; 
 
console.log("使用Microsoft的pointer触屏模式"); 
 
} 
 
//IE9以及除IE四大浏览器，针对ios触屏和deskTop 
 
else if (target.addEventListener) { 
 
// iOS touch model 
 
target.addEventListener("touchstart", DoEvent, false); 
 
target.addEventListener("touchmove", DoEvent, false); 
 
target.addEventListener("touchend", DoEvent, false); 
 
target.addEventListener("touchcancel", DoEvent, false); 
 
// deskTop模式 
 
target.addEventListener("mousedown", DoEvent, false); 
 
/*

兼容capture的鼠标模式

1.问题：除了IE在鼠标移出监听对象时依旧能传入事件，其他浏览器不能

2.解决方案：mousedown触发时，监听对象改为document

*/ 
 
// 只有ie9进入 
 
if (target.setCapture && !window.navigator.userAgent.match(/\bGecko\b/)) { 
 
useSetReleaseCapture = true; 
 
target.addEventListener("mousemove", DoEvent, false); 
 
target.addEventListener("mouseup", DoEvent, false); 
 
console.log("使用支持setCapture的deskTop模式"); 
 
} 
 
} 
 
//退化到IE8-,只针对deskTop 
 
else if (target.attachEvent && target.setCapture) { 
 
useSetReleaseCapture = true; 
 
target.attachEvent("onmousedown", function () { DoEvent(window.event); window.event.returnValue = false; return false; }); 
 
target.attachEvent("onmousemove", function () { DoEvent(window.event); window.event.returnValue = false; return false; }); 
 
target.attachEvent("onmouseup", function () { DoEvent(window.event); window.event.returnValue = false; return false; }); 
 
console.log("使用支持setCapture的deskTop模式"); 
 
} 
 
else { 
 
console.log("检测不到事件绑定特性"); 
 
} 
 
} 
 
} 
 
t_m_Bind.bindEvent();

本文来源我爱IT技术网 http://www.52ij.com/jishu/12009.html 转载请保留链接。

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

iOS/IE10触摸事件兼容鼠标事件

最新文章

相关文章