One, the dropdown event
<!--HTML5-->
<! DOCTYPE html>
<html>
<head>
<TITLE>HTML5 Dropdown Event Simple Example </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "Apple-touch-fullscreen" content= "YES"/>
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no "/>
<meta name= "apple-mobile-web-app-capable" content= "yes"/>
<meta name= "format-detection" content= "Telephone=no"/>
</head>
<body id= "Bodyid" >
<H2>HTML5 Dropdown Event Simple Example </h2>
<br/>
<div id= "Version" style= "border:2px solid Black;background-color:yellow" ></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id= "Result" style= "border:2px solid red; color:red; " > does not trigger event! </div>
<script type= "Text/javascript" >
Global variable, touch start position
var startx = 0, starty = 0;
Touchstart Events
function Touchsatrtfunc (evt) {
Try
{
Evt.preventdefault (); The browser's zoom, scroll bar scrolling, and so on when the touch is blocked
var touch = evt.touches[0]; Get the first contact
var x = Touch.pagex; Page contact x coordinates
var y = touch.pagey; Page contact y-coordinate
//Record contact initial position
startx = x;
starty = y;
var text = ' Touchstart event triggers: (' + x + ', ' + y + ') ';
document.getElementById ("Result"). InnerHTML = text;
}
catch (e) {
Alert (' Touchsatrtfunc: ' + e.message);
}
}
Touchmove event, this event cannot get coordinates
function Touchmovefunc (evt) {
Try
{
Evt.preventdefault (); The browser's zoom, scroll bar scrolling, and so on when the touch is blocked
var touch = evt.touches[0]; Get First Contact
var x = Touch.pagex; Page Contact X coordinates
var y = touch.pagey; Page Contact y-coordinate
var text = ' Touchmove event triggers: (' + x + ', ' + y + ') ';
if (Y-starty < 100) {
Text + = ' <br/> dropdown event trigger ';
Bindevent (1);
}
document.getElementById ("Ggimgid"). style["Webkittransform"] = ' translate (0px, ' + (y-starty) + ' px ' scale (1) Translatez (0px) ';
document.getElementById ("Result"). InnerHTML = text;
}
catch (e) {
Alert (' Touchmovefunc: ' + e.message);
}
}
Touchend Events
function Touchendfunc (evt) {
try {
Evt.preventdefault (); The browser's zoom, scroll bar scrolling, and so on when the touch is blocked
var text = ' Touchend event trigger ';
document.getElementById ("Result"). InnerHTML = text;
}
catch (e) {
Alert (' Touchendfunc: ' + e.message);
}
}
Binding events
function Bindevent (f) {
if (f==1) {
Document.removeeventlistener (' Touchstart ', Touchsatrtfunc, false);
Document.removeeventlistener (' Touchmove ', Touchmovefunc, false);
Document.removeeventlistener (' Touchend ', Touchendfunc, false);
}else{
Document.addeventlistener (' Touchstart ', Touchsatrtfunc, false);
Document.addeventlistener (' Touchmove ', Touchmovefunc, false);
Document.addeventlistener (' Touchend ', Touchendfunc, false);
}
}
Determining whether to support touch events
function Istouchdevice () {
document.getElementById ("version"). InnerHTML = navigator.appversion;
try {
Document.createevent ("TouchEvent");
Alert ("Support for touchevent events!") ");
Bindevent (); Binding events
}
catch (e) {
Alert ("Does not support TouchEvent events!") "+ e.message);
}
}
Window.onload = Istouchdevice;
</script>
</body>
</html>
Pull Up Event
<!--HTML5-->
<! DOCTYPE html>
<html>
<head>
<TITLE>HTML5 Event Simple Example </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "Apple-touch-fullscreen" content= "YES"/>
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no "/>
<meta name= "apple-mobile-web-app-capable" content= "yes"/>
<meta name= "format-detection" content= "Telephone=no"/>
</head>
<body id= "Bodyid" >
<H2>HTML5 Event Simple Example </h2>
<br/>
<div id= "Version" style= "border:2px solid Black;background-color:yellow" ></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id= "Result" style= "border:2px solid red; color:red; " > does not trigger event! </div>
<script type= "Text/javascript" >
Global variable, touch start position
var startx = 0, starty = 0;
Touchstart Events
function Touchsatrtfunc (evt) {
Try
{
Evt.preventdefault (); The browser's zoom, scroll bar scrolling, and so on when the touch is blocked
var touch = evt.touches[0]; Get the first contact
var x = Touch.pagex; Page contact x coordinates
var y = touch.pagey; Page contact y-coordinate
//Record contact initial position
startx = x;
starty = y;
var text = ' Touchstart event triggers: (' + x + ', ' + y + ') ';
document.getElementById ("Result"). InnerHTML = text;
}
catch (e) {
Alert (' Touchsatrtfunc: ' + e.message);
}
}
Touchmove event, this event cannot get coordinates
function Touchmovefunc (evt) {
Try
{
Evt.preventdefault (); The browser's zoom, scroll bar scrolling, and so on when the touch is blocked
var touch = evt.touches[0]; Get First Contact
var x = Touch.pagex; Page Contact X coordinates
var y = touch.pagey; Page Contact y-coordinate
var text = ' Touchmove event triggers: (' + x + ', ' + y + ') ';
if (Y-starty <-100) {
Text + = ' <br/> pull event trigger ';
Bindevent (1);
}
document.getElementById ("Ggimgid"). style["Webkittransform"] = ' translate (0px, ' + (y-starty) + ' px ' scale (1) Translatez (0px) ';
document.getElementById ("Result"). InnerHTML = text;
}
catch (e) {
Alert (' Touchmovefunc: ' + e.message);
}
}
Touchend Events
function Touchendfunc (evt) {
try {
Evt.preventdefault (); The browser's zoom, scroll bar scrolling, and so on when the touch is blocked
var text = ' Touchend event trigger ';
document.getElementById ("Result"). InnerHTML = text;
}
catch (e) {
Alert (' Touchendfunc: ' + e.message);
}
}
Binding events
function Bindevent (f) {
if (f==1) {
Document.removeeventlistener (' Touchstart ', Touchsatrtfunc, false);
Document.removeeventlistener (' Touchmove ', Touchmovefunc, false);
Document.removeeventlistener (' Touchend ', Touchendfunc, false);
}else{
Document.addeventlistener (' Touchstart ', Touchsatrtfunc, false);
Document.addeventlistener (' Touchmove ', Touchmovefunc, false);
Document.addeventlistener (' Touchend ', Touchendfunc, false);
}
}
Determining whether to support touch events
function Istouchdevice () {
document.getElementById ("version"). InnerHTML = navigator.appversion;
try {
Document.createevent ("TouchEvent");
Alert ("Support for touchevent events!") ");
Bindevent (); Binding events
}
catch (e) {
Alert ("Does not support TouchEvent events!") "+ e.message);
}
}
Window.onload = Istouchdevice;
</script>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
