网站运营包括哪些,wordpress 类似divi的,wordpress社交源码,网站开发支付模块基本概念 1、在移动web端点击事件或者滑动屏幕、捏合等动作都是由touchstar、touchmove、touchend这三个事件组合在一起使用的 2、click事件在移动端会有0.2秒的延迟#xff0c;下面是测试click在移动web端的延迟#xff0c;最好在手机浏览器中测试 scriptwindow.onl…基本概念 1、在移动web端点击事件或者滑动屏幕、捏合等动作都是由touchstar、touchmove、touchend这三个事件组合在一起使用的 2、click事件在移动端会有0.2秒的延迟下面是测试click在移动web端的延迟最好在手机浏览器中测试 scriptwindow.onload function () {var currentTime 0;document.body.addEventListener(click, function (ev) {console.log(Date.now() - currentTime);})document.body.addEventListener(touchstart, function (ev) {currentTime Date.now();});}
/script 3、touchstar、touchmove、touchend这三个事件我们关注的是里面的touches属性这是一个数组里面有鼠标clientX与clinetY属性 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleTitle/titlestylehtml, body {height: 100%;background-color: pink;}/style
/head
body
scriptwindow.onload function () {document.body.addEventListener(touchstart, function (ev) {console.log(ev);});document.body.addEventListener(touchmove, function (ev) {console.log(ev);});document.body.addEventListener(touchend, function (ev) {console.log(ev);})}
/script
/body
/html touchstarttouches中有长度为1的数组touches[0]中clientXclientY是有值的 touchmovetouches中有长度为1的数组touches[0]中clientXclientY是有值的而且不断在变化 touchendtouches中有长度为0的数组因为我们只是一个鼠标在点击鼠标弹起的时候touches是不会存储值的 点击事件 既然click有延迟那么我们就用touch的三个事件来代替click事件只要满足下面几种情况我们就能够说明这次动作是点击事件而不是长按屏幕或者滑动屏幕 1、touchstart与touchend触发的事件大于250就证明这不是点击事件 2、touchmove事件在这次动作中被触发就证明这不是点击事件 3、下面是封装的一个toush事件模仿点击事件需要注意的是回调函数的参数它的实参是在函数中被传入的 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleTitle/titlestylehtml, body {height: 100%;background-color: pink;}/style
/head
body
scriptvar ele document.querySelector(body);fox_tap(ele, function (e) {console.log(点击);console.log(e);});/*element绑定的dom元素callback回调函数*/function fox_tap(element, callback) {var statTime 0;var isMove false;var maxTime 250;var event null;element.addEventListener(touchstart, function (e) {statTime Date.now();/*每次执行注册事件都要初始化此值因为touchmove事件触发的时候会更改isMove的值不更改下次再进入touchtend事件会沿用上次touchmove修改过的isMove的值这样就一直终端函数*/isMove false;event e;});element.addEventListener(touchmove, function (e) {isMove true;});element.addEventListener(touchend, function (e) {if (isMove true) {return;}if ((Date.now() - statTime) maxTime) {return;}callback(event);});}
/script
/body
/html 转载于:https://www.cnblogs.com/wuqiuxue/p/8242058.html
