当前位置: 代码迷 >> Web前端 >> WebApp开发札记一:关于手机网页的点击事件执行顺序总结
  详细解决方案

WebApp开发札记一:关于手机网页的点击事件执行顺序总结

热度:706   发布时间:2014-02-12 21:25:08.0
WebApp开发笔记一:关于手机网页的点击事件执行顺序总结

关于手机网页的点击事件执行顺序总结:

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1.0,user-scalable=no" name="viewport"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="stylesheet" type="text/css" href="images/main.css"/>
<style type="text/css">
#main{width:100%;height:200px;background:#c00;}
</style>
<title>SeaJs</title>
</head>
<body>
<div id="main">
点击区域
</div>
</body>
</html>
<script type="text/javascript">
var $body = document.getElementById('main');
//1
$body.addEventListener('touchstart',function(e){
	//alert('touchstart');
});
//2
$body.addEventListener('touchend',function(e){
	//alert('touchend');
});
//3
$body.addEventListener('mouseover',function(e){
	//alert('mouseover');
});
//4
$body.addEventListener('mousemove',function(e){
	//alert('mousemove');
});
//5
$body.addEventListener('mousedown',function(e){
	//alert('mousedown');
});
//6
$body.addEventListener('mouseup',function(e){
	//alert('mouseup');
});
//7
$body.addEventListener('click',function(e){
	//alert('click');
});
/*不执行*/
$body.addEventListener('mouseout',function(e){
	//alert('mouseout');
});
/*不执行*/
$body.addEventListener('dblclick',function(e){
	//alert('dblclick');
});
</script>

?