移动端开发中的JavaScript事件处理

发表时间: 2024-05-02 20:51

基本上所有的PC端事件移动端都可以用

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{    margin: 0;    padding: 0;}div{    width: 100vw;    height: 50vh;    background-color: orange;}</style></head><body><div></div><script type="text/javascript">    //基本上所有的PC端事件移动端都可以用    var div = document.getElementsByTagName("div")[0];    /*div.onclick = function(){    this.style.backgroundColor = "green";    }*/    div.onmouseover = function(){        this.style.backgroundColor = "blue";    }</script></body></html>

移动端特有的事件

ontouchstart 手指按下

ontouchmove 手指移动

ontouchend 手指抬起

ontouchcancel 移动端发生了触摸中断, 这个事件不容易在浏览器的模拟器中模拟, 实际中用的很少。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style type="text/css">*{    margin: 0;    padding: 0;}div{    width: 100vw;    height: 50vh;    background-color: orange;}</style></head><body><div></div><script type="text/javascript">    //基本上所有的PC端事件移动端都可以用    var div = document.getElementsByTagName("div")[0];    //移动端事件我们通过DOM2级进行绑定    /*div.ontouchstart = function(){    this.innerText += "手指按下";    }*/    //div.addEventListener(事件名称(不加on),执行函数,是否捕获)    //div.attachEvent(事件名称(加on),执行函数)    div.addEventListener("touchstart",function(){    this.innerText = "手指按下";    },false)</script></body></html>

移动端事件监听

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style type="text/css">*{    margin: 0;    padding: 0;}div{    width: 100vw;    height: 50vh;    position: absolute;    left: 0;    top: 0;    background-color: rgba(255,0,0,0.5);}a{    font-size: 10vw;}</style></head><body><div></div><a href="http://baidu.com">百度一下</a><script type="text/javascript">    //基本上所有的PC端事件移动端都可以用    var div = document.getElementsByTagName("div")[0];    /*ontouchstart//手指按下    ontouchmove//手指移动    ontouchend//手指抬起    ontouchcancel//手指抬起*/    //移动端事件我们通过DOM2级进行绑定    /*div.ontouchstart = function(){    this.innerText += "手指按下";    }*/    //div.addEventListener(事件名称(不加on),执行函数,是否捕获)    //div.attachEvent(事件名称(加on),执行函数)    div.addEventListener("touchstart",function(){    this.style.backgroundColor = "rgba(0,255,0,0.5)"    },false)    /*div.onclick = function(){    this.style.backgroundColor = "rgba(0,255,0,0.5)";    }*/</script></body></html>

移动端开发中的JavaScript事件处理

热门阅读

推荐阅读