這是一個(gè)事件綁定的問(wèn)題，我這個(gè)寫(xiě)法和上課時(shí)老師講的寫(xiě)法是一樣的，為什么我這個(gè)就會(huì)出錯(cuò)呢？主要原因是事件綁定時(shí)沒(méi)有將“e”傳進(jìn)去，但是老師上課時(shí)也沒(méi)有傳進(jìn)去呀，怎么他的就可以呢？
<body>
<div id="div1">
touch滑動(dòng)
</div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript">
window.onload = function(){
var oDiv1 = document.querySelector("#div1");
//獲取touch的position；
function getTouchPos(e){
var touches = e.touches;
if(touches && touches[0]){
return {
x : touches[0].clientX,
y : touches[0].clientY
}
}
return {x : touches.clinetX, y : touches.clientY}
}
function getDis(p1, p2){
var dis = Math.sqrt(Math.pow(p1.x-p2.x, 2) + Math.pow(p1.y - p2.y, 2));
if(!p1 || !p2){
return 0;
}
return dis;
}
function getAngle(p1,p2){
var angle = Math.atan2(p2.y-p1.y, p2.x-p1.x);
var a = angle*180/Math.PI;
return a;
}
function getDirection(p1,p2){
var angle = getAngle(p1, p2);
var dir = "";
if(angle>-45 && angle<=45){
dir = "left"
}else if(angle > 45 && angle <= 135){
dir = "top"
}else if(angle >135 && angle <= -135){
dir = "right"
}else if(angle >-135 && angle <= -45){
dir = "bottom"
}
return dir;
}
var startTime = 0;
var startPos = {};
var endTime = 0;
var endPos = {};
var startTouchHandle=function(e){
startPos = getTouchPos(e);
startTime = Date.now();
}
var moveTouchHandle=function(e){
endPos = getTouchPos(e);
endTime = Date.now();
}
var endTouchHandle=function(e){
endPos = getTouchPos(e);
var dir = getDirection(startPos,endPos);
//由于事件綁定時(shí)沒(méi)有把“e”這個(gè)參數(shù)傳進(jìn)去，因此這里彈出的是undefined；
alert(endPos.y);
switch(dir){
case "left":
oDiv1.innerHTML = "left"
break;
case "right":
oDiv1.innerHTML = "right"
break;
case "top":
oDiv1.innerHTML = "top"
break;
case "bottom":
oDiv1.innerHTML = "bottom"
break;
}
}
var touchStart = "";
var touchMove = "";
var touchEnd = "";
if("ontouchstart" in window){
touchStart = "touchstart";
touchMove = "touchmove";
touchEnd = "touchend";
}else{
touchStart = "mousedown";
touchMove = "mousemove";
touchEnd = "mouseup";
}
oDiv1.addEventListener(touchStart, startTouchHandle)
oDiv1.addEventListener(touchMove, moveTouchHandle)
oDiv1.addEventListener(touchEnd, endTouchHandle)
//像下面這樣寫(xiě)就正常
/*oDiv1.addEventListener(touchStart, function(e){
endTouchHandle(e)
},false)*/
}
</script>
</body>
2016-02-17
首先，題主對(duì)形參和實(shí)參的概念沒(méi)有弄清楚。?
然后，題主對(duì)touch事件的下的三個(gè)屬性沒(méi)有弄清楚 ?touches targetToutches changedTouches分別代表什么？
題主把最后最后的touchStart 換成 touchEnd之后 你會(huì)發(fā)現(xiàn) ，你所謂的成長(zhǎng)寫(xiě)法還是無(wú)效的 ， 因?yàn)閠ouchEnd觸發(fā)的Event事件根本不會(huì)有touches屬性