Touch event funktioniert nicht

Xching

Erfahrenes Mitglied
Ich habe gerade Probleme mit touch event. Ich versuche gerade die Funktion touchstart,touchmove, touchend, mousedown,mousemove,mouseup zuschreiben. Ich habe von Internetseite nachgebaut aber es hat nicht funktioniert.

Ich habe Fallunterscheidung zwischen Mouse event und Touch event gemacht und Touch event hat nicht funktioniert aber bei Mouse event hat es alles funktioniert.



Ich weiß es nicht, wo die Fehler sind. ich hoffe, dass ihr mir weiter helfen könnte. Ich danke ihnen schon mal vorraus.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html;charset=iso -8859-1"/>
<title>Div-Container mit Touch bewegen</title>
</head>
<body onload = "initialise()">
<div class="test" id="test1">
<h3> Mouse move! </h3>
</div>
<h3 id="statusdiv">Status</h3>
</body>
</html>

CSS:
<style type="text/css">


     #test1{ left:300px;
           top: 175px;
           background-color: #808000;
           width: 150px;
           height: 150px;}

</style>


Javascript:
<script type="text/javascript">
var statusdiv
var startx = 0
var starty = 0

//var movemap = 0;
function initialise(){

  var statusdiv = document.getElementById("statusdiv")
  var box1 = document.getElementById("test1")
     
    //('touchstart')
    if ('touchstart' in window){
  box1.addEventListener('touchstart', touchstarts, false)
  box1.addEventListener('touchmove', touchmoves, false)
  box1.addEventListener('touchend', touchends, false)
     
  } else {
   
    box1.addEventListener('mousedown', mousedown, false)
  box1.addEventListener('mousemove', mousemove, false)
  box1.addEventListener('mouseup', mouseup, false)
   }
   
   
function touchstarts(e){
var touchobj = e.changedTouches[0] // reference first touch point (ie: first finger)  
startx = Math.round(touchobj.clientX) // get x position of touch point relative
starty = Math.round(touchobj.clientY)
statusdiv.innerHTML = 'Status: touchstart<br> ClientX: ' + startx + 'px' +starty+
e.preventDefault()
}
function touchmoves(e){
var touchobj = e.changedTouches[0] // reference first touch point for this event
var distx = Math.round(touchobj.clientX)  - startx
var disty = Math.round(touchobj.clientY)  - starty
statusdiv.innerHTML = 'Status: touchmove<br> Horizontal distance traveled: ' + distx + 'px' +disty
e.preventDefault()
}
function touchends(e){
var touchobj = e.changedTouches[0] // reference first touch point for this event
statusdiv.innerHTML = 'Status: touchend<br> Resting x coordinate: ' + touchobj.clientX + 'px' +touchobj.clientY+
e.preventDefault()
}

function mousedown(e){
startx = Math.round( e.clientX) // get x position of touch point relative to left
starty = Math.round(e.clientY)
statusdiv.innerHTML = 'Status: mousedown<br> ClientX: ' + startx + 'px' +starty+
e.preventDefault()
}
function mousemove(e){
var distx = Math.round(e.clientX) - startx
var disty = Math.round(e.clientY) - starty
statusdiv.innerHTML = 'Status: mousemove<br> Horizontal distance traveled: ' + distx + 'px' +disty
e.preventDefault()
}
function mouseup(e){
statusdiv.innerHTML = 'Status: mouseup<br> Resting x coordinate: ' + e.clientX + 'px' +e.clientY+
e.preventDefault()
}
}
</script>
 
Zuletzt bearbeitet:
Hi,

ohne Test:
- gib dem Element in der CSS-Regel absolute Positionierung (position: absolute)
- rufe die Funktion initialise auf

Ciao
Quaese
 
Vielen Dank Quaese, ich habe schon gemacht, wie du geschrieben hast aber es hat auch nicht funktioniert.
 
Du ermittelst das Element für die Testausgaben sofort, bevor das DOM fertig ist. Wenn Du das in die Funktion initialise übernimmst, funktioniert alles:
Code:
var testausgabe;
var startx = 0;
var dist = 0;
function initialise() {
testausgabe = document.getElementById("testausgaben");
var box = document.getElementById("test1");
box.addEventListener("touchstart", touchstarts, false);
box.addEventListener("touchmove", touchmoves, false);
box.addEventListener("touchend", touchends, false);
}
 
PS: Dieses:
Code:
event.changedTouches();
scheint mir fehlerhaft zu sein: changedTouches ist ein Array und keine Funktion.
 
Danke Sempervivum, ich habe schon probiert , wie du das geschrieben hat, es hat auch nicht funktioniert. Der changedTouches ist ein Array, deshalb habe ich in Array ("var touchobj = event.changedTouches[0];") gemacht oder hab ich falsch geschrieben. Zu deiner Frage : ich orientiere mich an Javascriptkit.
 
Hm, ich hatte es getestet und es hatte bei mir funktioniert. Auf was für einem Gerät hast Du es denn getestet?
 
hey, ich habe auf mein Iphone und auf PC getestet, aber es hat auch nicht funktioniert. Es ist aber komisch, warum es bei mir nicht funktioniert, wenn es bei dir funktioniert hat.
 
Hat dein PC einen Touchscreen? Mit der Maus funktioniert es nämlich nicht. Ich habe ein Samsung-Ace3-Handy und damit funktioniert es. Ist dein Code der selbe, den Du ganz oben gepostet hast? Die Funktion initialise muss im onload aufgerufen werden oder im DOM-ready.
 

Neue Beiträge

Zurück