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.
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: