touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发 touchmove:当手指在屏幕上滑动时连续地触发。在这个事件发生期间,调用preventDefault()可以阻止滚动 touchend:当手指从屏幕上移开时触发 touchcancel:当系统停止跟踪触摸时触发(不常用)。关于此事件的确切触发时间,文档中没有明确说明
鼠标 触摸 mousedown touchstart mousemove touchmove mouseup touchend
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #test{height:200px;width:200px;background:lightblue;} </style> </head> <body> <p id="test"></p> <script> (function(){ var stateMap = { touchstart_index : 0, touchmove_index : 0, touchend_index : 0 }, elesMap = { touch_obj: document.getElementById('test') }, showIndex, handleTouch; showIndex = function ( type ) { elesMap.touch_obj.innerHTML = type + ':' + (++stateMap[type + '_index']); }; handleTouch = function ( event ) { showIndex( event.type ); }; elesMap.touch_obj.addEventListener('touchstart', function(event){handleTouch(event);}); elesMap.touch_obj.addEventListener('touchmove', function(event){handleTouch(event);}); elesMap.touch_obj.addEventListener('touchend', function(event){handleTouch(event);}); })(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #test {position: absolute;top: 0;left: 0;opacity: 0.5;height: 200px;width: 200px;background: lightblue;} </style> </head> <body> <a href="https://baidu测试数据">百度</a> <p id="test"></p> <script> (function () { var elesMap = { touchObj: document.getElementById('test') }, fnHide, onTouch; fnHide = function (type) { elesMap.touchObj.style.display = 'none'; }; onTouch = function (event) { fnHide(); }; elesMap.touchObj.addEventListener('touchstart', function(event){onTouch(event);}); })(); </script> </body> </html>
(function () { var elesMap = { touchObj: document.getElementById('test') }, fnHide, onTouch; fnHide = function (type) { elesMap.touchObj.style.display = 'none'; }; onTouch = function (event) { setTimeout(function(){ fnHide(); },300); }; elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); }); })();
document.addEventListener('touchstart',function(e){ e.preventDefault(); })
a.addEventListener('touchstart',function(){ window.location.href = 'https://cnblogs测试数据'; })
el.addEventListener('touchstart',function(e){ e.stopPropagation(); })
<script> (function () { var elesMap = { touchObj: document.getElementById('test') }, onTouch; onTouch = function (e) { console.log(e) }; elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); }); })(); </script>
//当前目标 currentTarget:[object HTMLpElement] //实际目标 target:[object HTMLpElement] //实际目标 srcElement:[object HTMLpElement]
//事件流 eventPhase: 2 //可冒泡 bubbles: true //默认事件可取消 cancelable: true
(function () { var elesMap = { touchObj: document.getElementById('test') }, onTouch; onTouch = function (e) { elesMap.touchObj.innerHTML = 'touches:' + e.touches.length + '<br>changedTouches:' + e.changedTouches.length + '<br>targetTouches:' + e.targetTouches.length; }; elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); }); })();
clientx:触摸目标在视口中的x坐标 clientY:触摸目标在视口中的y坐标 identifier:标识触摸的唯一ID pageX:触摸目标在页面中的x坐标(包含滚动) pageY:触摸目标在页面中的y坐标(包含滚动) screenX:触摸目标在屏幕中的x坐标 screenY:触摸目标在屏幕中的y坐标 target:触摸的DOM节点目标
(function () { var elesMap = { touchObj: document.getElementById('test') }, onTouch; onTouch = function (e) { var touch = e.changedTouches[0]; elesMap.touchObj.innerHTML = 'clientX:' + touch.clientX + '<br>clientY:' + touch.clientY + '<br>pageX:' + touch.pageX + '<br>pageY:' + touch.pageY + '<br>screenX:' + touch.screenX + '<br>screenY:' + touch.screenY }; elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); }); })();
相关推荐:
JS手机端touch事件计算滑动距离的方法
有关touch事件解析和封装的知识
javascript移动设备Web开发中对touch事件的封装实例_javascript技巧
以上就是web开发touch事件实例详解的详细内容,更多请关注Gxl网其它相关文章!
查看更多关于web开发touch事件实例详解的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did71707