pc端与移动端的事件总结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
margin: 0px;
}
#test,#test1,#test2,#test3,#test4{
position:absolute;
cursor:pointer;
}
#test{
width:300px;
height:300px;
background:goldenrod;
}
#test1{
width:200px;
height:200px;
background:#a5a5a5;
}
#test2{
width:150px;
height:150px;
background:yellowgreen;
}
#test3{
width:100px;
height:100px;
background:red;
}
#test4{
width:50px;
height:50px;
background:blue;
}
</style>
</head>
<body>
<div id="test" >
</div>
<div id="test1">1
</div>
<div id="test2" >2
</div>
<div id="test3" >3
</div>
<div id="test4" >4
</div>
</body>
</html>
<script>
window.onload=function(){
//电脑端测试一二
var test1=document.getElementById("test1");
var test2=document.getElementById("test2");
// 测试一
test1.onmousedown=function(ev){
var this_=this;
ev.preventDefault();
var startX=ev.pageX-this_.offsetLeft;
var startY=ev.pageY-this_.offsetTop;
document.onmousemove=function(ev){
this_.style.left=(ev.pageX-startX)+"px";
this_.style.top=(ev.pageY-startY)+"px";
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmousedown=null;
document.onmouseup=null;
}
}
// 测试二
test2.addEventListener("mousedown",m_mousedown,false);
function m_mousedown(ev){
var this_=this;
ev.preventDefault();
var startX=ev.pageX-this_.offsetLeft;
var startY=ev.pageY-this_.offsetTop;
document.onmousemove=function(ev){
this_.style.left=(ev.pageX-startX)+"px";
this_.style.top=(ev.pageY-startY)+"px";
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmousedown=null;
document.onmouseup=null;
}
}
//移动端测试一二
// 测试1
test3.addEventListener('touchstart',touchstart1,false);
var startX;
var startY;
function touchstart1(event){
var this_=this;
event.preventDefault();
var ev=event.touches[0];
startX=ev.pageX-this_.offsetLeft;
startY=ev.pageY-this_.offsetTop;
document.addEventListener('touchmove',touchmove1, false);
document.addEventListener('touchend', touchend1, false);
}
function touchmove1(){
event.preventDefault();
var ev = event.touches[0];
event.target.style.left=(ev.pageX-startX)+"px";
event.target.style.top=(ev.pageY-startY)+"px";
}
function touchend1(){
event.target.removeEventListener('touchmove', touchmove1, false);
event.target.removeEventListener('touchend', touchend1, false);
}
// 测试2
drag_moblie(test4);
function drag_moblie(obj){
obj.addEventListener('touchstart',touchstart1,false);
var startX;
var startY;
function touchstart1(event){
var this_=this;
event.preventDefault();
var ev=event.touches[0];
startX=ev.pageX-this_.offsetLeft;
startY=ev.pageY-this_.offsetTop;
document.addEventListener('touchmove',touchmove1, false);
document.addEventListener('touchend', touchend1, false);
}
function touchmove1(){
event.preventDefault();
var ev = event.touches[0];
event.target.style.left=(ev.pageX-startX)+"px";
event.target.style.top=(ev.pageY-startY)+"px";
}
function touchend1(){
event.target.removeEventListener('touchmove', touchmove1, false);
event.target.removeEventListener('touchend', touchend1, false);
}
}
drag_moblie(test);
test.addEventListener("mousedown",m_mousedown,false);
}
</script>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2015-10-16，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 交互设计前端开发与后端程序设计 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读