モバイルデバイス、携帯ブラウザJavascriptスライドイベントコード(touchイベント)
5864 ワード
<!-- HTML5 -->
<!DOCTYPE html>
<html>
<head>
<title>TouchEvent </title>
<meta charset="gbk">
</head>
<body>
<h2>TouchEvent </h2>
<br />
<div id="version" style="border:2px solid black;background-color:yellow"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<div id="result" style="border:2px solid red; color:red;"> ！</div>
<div id="test" style="border:2px solid red">
<ul>
<li id="li1"> 1</li>
<li id="li2"> 2</li>
<li id="li3"> 3</li>
<li id="li4"> 4</li>
<li id="li5"> 5</li>
<li id="li6"> 6</li>
<li id="li7"> 7</li>
<li id="li8"> 8</li>
<li id="li9"> 9</li>
<li id="li10"> 10</li>
<li id="li11"> 11</li>
<li id="li12"> 12</li>
<li id="li13"> 13</li>
<li id="li14"> 14</li>
<li id="li15"> 15</li>
<li id="li16"> 16</li>
<li id="li17"> 17</li>
<li id="li18"> 18</li>
<li id="li19"> 19</li>
<li id="li20"> 20</li>
</ul>
</div>
<script type="text/javascript">
// ，
var startX = 0, startY = 0;
//touchstart
function touchSatrtFunc(evt) {
try
{
//evt.preventDefault(); // 、
var touch = evt.touches[0]; //
var x = Number(touch.pageX); // X
var y = Number(touch.pageY); // Y
//
startX = x;
startY = y;
var text = 'TouchStart ：（' + x + ', ' + y + '）';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchSatrtFunc：' + e.message);
}
}
//touchmove ，
function touchMoveFunc(evt) {
try
{
//evt.preventDefault(); // 、
var touch = evt.touches[0]; //
var x = Number(touch.pageX); // X
var y = Number(touch.pageY); // Y
var text = 'TouchMove ：（' + x + ', ' + y + '）';
//
if (x - startX != 0) {
text += '<br/> ';
}
if (y - startY != 0) {
text += '<br/> ';
}
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchMoveFunc：' + e.message);
}
}
//touchend
function touchEndFunc(evt) {
try {
//evt.preventDefault(); // 、
var text = 'TouchEnd ';
document.getElementById("result").innerHTML = text;
}
catch (e) {
alert('touchEndFunc：' + e.message);
}
}
//
function bindEvent() {
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
}
//
function isTouchDevice() {
document.getElementById("version").innerHTML = navigator.appVersion;
try {
document.createEvent("TouchEvent");
alert(" TouchEvent ！");
bindEvent(); //
}
catch (e) {
alert(" TouchEvent ！" + e.message);
}
}
window.onload = isTouchDevice;
</script>
</body>
</html>