這是一個事件綁定的問題，我這個寫法和上課時老師講的寫法是一樣的，為什么我這個就會出錯呢？主要原因是事件綁定時沒有將“e”傳進去，但是老師上課時也沒有傳進去呀，怎么他的就可以呢？
<body>
<div id="div1">
touch滑動
</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);
//由于事件綁定時沒有把“e”這個參數傳進去，因此這里彈出的是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)
//像下面這樣寫就正常
/*oDiv1.addEventListener(touchStart, function(e){
endTouchHandle(e)
},false)*/
}
</script>
</body>
2016-02-17
首先，題主對形參和實參的概念沒有弄清楚。?
然后，題主對touch事件的下的三個屬性沒有弄清楚 ?touches targetToutches changedTouches分別代表什么？
題主把最后最后的touchStart 換成 touchEnd之后 你會發現 ，你所謂的成長寫法還是無效的 ， 因為touchEnd觸發的Event事件根本不會有touches屬性