addEventListener和bind的使用问题
1
[已解决问题]
解决于 2011-11-11 15:48
有一段程序，功能是手指触摸屏幕的时候产生一个红色的小框框，手指移动的时候小框会跟着手指移动，下面是能够实现这个功能的代码，各个事件用addEventListener：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- 只要将当前站点配置为移动应用程序，则对 phonegap.js 的该引用将允许代码提示。
要将该站点配置为移动应用程序，请转至“站点”->“移动应用程序”->“配置应用程序框架...”-->
<script src="/phonegap.js" type="text/javascript"></script>
<style type="text/css">
.spirit {/* 方块的class名称*/
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body style="margin:0;padding:0;">
<div data-role="page">
<div id="canvas" style="width:100%; border:1px solid #F00;">sssssssssssss</div>
<div id="value"></div>
</div>
</body>
<script type="text/javascript">
// define global variable
var canvas = document.getElementById("canvas"),spirit, startX, startY;
// touch start listener
function touchStart(event) {
event.preventDefault();
if (spirit ||! event.touches.length) return;
var touch = event.touches[0];
startX = touch.pageX;
startY = touch.pageY;
spirit = document.createElement("div");
spirit.className ="spirit";
spirit.style.left = startX;
spirit.style.top = startY;
canvas.appendChild(spirit);
}
// add touch start listener
canvas.addEventListener("touchstart", touchStart, false);
function touchMove(e) {
e.preventDefault();
if (!spirit ||!e.touches.length) return;
var touch = e.touches[0];
x = touch.pageX-startX,
y = touch.pageY-startY;
// $("#value").html("touch.pageX:"+touch.pageX+",touch.pageY:"+touch.pageY);
spirit.style.webkitTransform ='translate('+ x +'px, '+ y +'px)';
}
canvas.addEventListener("touchmove", touchMove, false);
function touchEnd(event) {
if(!spirit) return;
canvas.removeChild(spirit);
spirit =null;
}
canvas.addEventListener("touchend", touchEnd, false);
</script>
</html>
以下是使用bind:
<body style="margin:0;padding:0;">
<div data-role="page">
<div id="canvas" style="width:100%; border:1px solid #F00;">sssssssssssss</div>
<div id="value"></div>
</div>
</body>
<script type="text/javascript">
// define global variable
var canvas = $("#canvas"),spirit, startX, startY;
// touch start listener
function touchStart(event) {
event.preventDefault();
if (spirit ||! event.touches.length) return;
var touch = event.touches[0]||event.changedTouches[0];
startX = touch.pageX;
startY = touch.pageY;
spirit = document.createElement("div");
spirit.className ="spirit";
spirit.style.left = startX;
spirit.style.top = startY;
canvas.appendChild(spirit);
}
// add touch start listener
canvas.bind("touchstart", touchStart);
function touchMove(e) {
e.preventDefault();
if (!spirit ||!e.touches.length) return;
var touch = e.touches[0]||e.changedTouches[0];
x = touch.pageX-startX,
y = touch.pageY-startY;
spirit.style.webkitTransform ='translate('+ x +'px, '+ y +'px)';
}
canvas.bind("touchmove", touchMove);
function touchEnd(event) {
if(!spirit) return;
canvas.removeChild(spirit);
spirit =null;
}
canvas.bind("touchend", touchEnd);
</script>
</html>
但是使用bind时无法实现该功能，请问是什么原因呢？
最佳答案
0
帮你顶一下。。。
呵呵，谢啦，已经弄明白了~~
@呦菜: 请问是什么原因。。我也遇到了bind无法实现的问题
@呦菜: 请问：为什么不能用bind呢
