您的位置：首页 > 其它

触摸事件--兼容不同浏览器及不同IE版本

2016-01-06 15:07 681 查看

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">

/* Direct all pointer events to JavaScript code. */
.touch{
-ms-touch-action: none; /* set for IE */
touch-action: none; /* set for Edge */
}

</style>
</head>
<body>
<h1>Touch event compatible with different browser and IE version.</h1>
<br/>

<div id="monitor">
Coordinate: X-0, Y-0
</div>

<div id="holder" class="touch" style="height:200px;background-color:rgb(103, 195, 215)">
Moving your finger on this div block, your will see coordinate on the above changed as your moving.
</div>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

window.onload = function()
{
if(window.PointerEvent) //IE 11 & Edge
{
$('#holder').on('pointermove', printcoordinate);
}
else if(window.MSPointerEvent) //IE10
{
$('#holder').on('MSPointerMove', printcoordinate);
}
else //Chrome, Safari
{
$('#holder').on('touchmove', printcoordinate);
}

function printcoordinate(e)
{
var pointerEnabled = window.PointerEvent || window.MSPointerEvent;
var touches = pointerEnabled ? e.originalEvent : e.originalEvent.touches[0];

$('#monitor').html("Coordinate: X-" + touches.pageX + ", Y-" + touches.pageY);
}
}

</script>
</body>
</html>

参考：
https://msdn.microsoft.com/en-us/library/windows/apps/hh465895.aspx https://blogs.msdn.microsoft.com/ie/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers/ https://msdn.microsoft.com/en-us/library/hh972895(v=vs.85).aspx

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： MSPointerMove pointermove touchmove touch event

相关文章推荐

新的分享

章节导航