首页 新闻 搜索 专区 学院

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时无法实现该功能,请问是什么原因呢?

呦菜的主页 呦菜 | 初学一级 | 园豆:2
提问于:2011-11-11 14:26
< >
分享
最佳答案
0

帮你顶一下。。。

SNAIL_ll | 菜鸟二级 |园豆:280 | 2011-11-11 15:39

呵呵,谢啦,已经弄明白了~~

呦菜 | 园豆:2 (初学一级) | 2011-11-11 15:48

@呦菜: 请问是什么原因。。我也遇到了bind无法实现的问题

lazybone | 园豆:200 (初学一级) | 2015-06-14 00:41

@呦菜: 请问:为什么不能用bind呢

繁华已逝 | 园豆:353 (菜鸟二级) | 2015-10-30 09:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册