建设银行洛阳市分行网站,创新营销方式有哪些,山西网站制作公司哪家好,工厂网站开发这里给大家分享我在网上总结出来的一些知识#xff0c;希望对大家有所帮助 前言 2023年了#xff0c;我不允许还有人不会自己实现移动端的双击事件。 过来#xff0c;看这里#xff0c;不足 50 行的代码实现的双击事件。 听笔者娓娓道来。 dblclick js原生有个dblclick双击… 这里给大家分享我在网上总结出来的一些知识希望对大家有所帮助 前言 2023年了我不允许还有人不会自己实现移动端的双击事件。 过来看这里不足 50 行的代码实现的双击事件。 听笔者娓娓道来。 dblclick js原生有个dblclick双击事件但是几乎不支持移动端。 而且该dblclick事件在pc端鼠标双击时会触发两次click与一次dblclick。 window.addEventListener(click, () {console.log(click)
});
window.addEventListener(dblclick, () {console.log(dblclick)
});// 双击页面打印click✖️2 dblclick我们期望可以在移动端也能有双击事件并且隔离单击与双击事件双击时只触发双击事件只执行双击回调函数让注册双击事件像注册原生事件一样简单。 点击穿透 简单聊聊移动端的点击穿透。 在移动端单击会依次触发touchstart-touchmove-touchend-click事件。 有这样一段逻辑在touchstart时出现全屏弹框在click弹框时关闭弹框。实际上在点击页面时弹框会一闪而过并没有出现正确的交互。在移动端单击时touchstart早于click当弹框出现了后来的click事件就落在了弹框上导致弹框被关闭。这就是点击穿透的一种表现。 笔者的业务需求是双击元素出现全屏弹框单击弹框时关闭弹框。因此基于这样的业务需求与现实的点击穿透问题笔者选择采用click事件来模拟双击事件并且适配pc端使用。大家也可以选择解决点击穿透问题并采用touchstart模拟双击事件可以更快地响应用户操作。 采用touchstart模拟时可以再考虑排除双指点击的情况。 在实现上与下文代码除了事件对象获取位置属性有所不同外其它代码基本一致实现思路无差别。 模拟双击事件 采用click事件来模拟实现双击。 双击事件定义2次点击事件间隔小于200ms并且点击范围小于10px的视为双击。这里的双击事件是自定义事件为了区分原生的 dblclick又优先满足移动端使用则事件名定义为 dbltouch后续可以使用window.addEventListener(dbltouch, (){})来监听双击事件。 这个间隔与位移限制大家可以根据自己的业务需求调整。通常采用的是300ms的间隔与10px的位移笔者业务中发现200ms间隔也可使用。 自定义事件名大家可以随意设置满足语义化即可。 监听click事件并在捕获阶段监听目的是为了后续能够阻止click事件传播。 window.addEventListener(click, handler, true);监听函数中第1次点击时记录点击位置并设置200ms倒计时。如果第2次点击在200ms后则重新派发当前事件让事件继续传播使其它的监听函数可以继续处理对应事件。 // 标识是否在等待第2次点击
let isWaiting false;// 记录点击位置
let prevPosition {};function handler(evt) {const { pageX, pageY } evt;prevPostion { pageX, pageY };// 阻止冒泡不让事件继续传播evt.stopPropagation();// 开始等待第2次点击isWaiting true;// 设置200ms倒计时200ms后重新派发当前事件timer setTimeout(() {isWaiting false;evt.target.dispatchEvent(evt);}, 200)
}注意 倒计时结束时evt.target.dispatchEvent(evt)派发的事件仍是原来的事件对象即仍是click事件会触发继续handler函数进入了循环。 这里需要破局已知Event事件对象下有一个 isTrusted 属性是一个只读属性是一个布尔值。当事件是由用户行为生成的时候这个属性的值为 true 而当事件是由脚本创建、修改、通过 EventTarget.dispatchEvent()派发的时候这个属性的值为 false 。 因此此处脚本派发的事件是希望继续传递的事件不用handler内处理。 function handler(evt) {// 如果事件是脚本派发的则不处理将该事件继续传播if(!evt.isTrusted){return;}
}处理完第1次点击后接着处理在200ms内的第2次点击事件。如果满足位移小于10px的条件则视为双击。 // 标识是否在等待第2次点击
let isWaiting false;// 记录点击位置
const prevPosition {};function handler(evt) {// 如果事件是脚本派发的则不处理将该事件继续传播if(!evt.isTrusted){return;}const { pageX, pageY } evt;if(isWaiting) {isWaiting false;const diffX Math.abs(pageX - prevPosition.pageX);const diffY Math.abs(pageY - prevPosition.pageY);// 如果满足位移小于10则是双击if(diffX 10 diffY 10) {// 取消当前事件传递并派发1个自定义双击事件evt.stopPropagation();evt.target.dispatchEvent(new PointerEvent(dbltouch, {cancelable: false,bubbles: true,}))}} else {prevPostion { pageX, pageY };// 阻止冒泡不让事件继续传播evt.stopPropagation();// 开始等待第2次点击isWaiting true;// 设置200ms倒计时200ms后重新派发当前事件timer setTimeout(() {isWaiting false;evt.target.dispatchEvent(evt);}, 200)}
}以上便实现了双击事件全局任意地方监听双击。 window.addEventListener(dbltouch, () {console.log(dbltouch);
})
window.addEventListener(click, () {console.log(click);
})
// 使用鼠标、手指双击
// 打印出 dbltouch
// 而且不会打印有click笔者要在这里说句 但是 由于200ms的延时虽不多但是对于操作迅速的用户来讲还是会有不好的体验。 优化双击事件 由于是在window上注册的click函数虽说注册双击事件像单击事件一样简单了但却也导致整个产品页面的click事件都会推迟200ms执行。 因此我们应该只对需要处理双击的地方添加双击事件至少只在局部发生延迟情况。稍微调整下代码将需要注册双击事件的元素由开发决定通过参数传递。而且事件处理函数也可以通过参数传递即可以通过监听双击事件也可以通过回调函数执行。 以下是完整的代码。 class RegisterDbltouchEvent {constructor(el, fn) {this.el el || window;this.callback fn;this.timer null;this.prevPosition {};this.isWaiting false;// 注册click事件注意this指向this.el.addEventListener(click, this.handleClick.bind(this), true);}handleClick(evt){if(this.timer) {clearTimeout(this.timer);this.timer null;}if(!evt.isTrusted) {return;};if(this.isWaiting){this.isWaiting false;const diffX Math.abs(pageX - this.prevPosition.pageX);const diffY Math.abs(pageY - this.prevPosition.pageY);// 如果满足位移小于10则是双击if(diffX 10 diffY 10) {// 取消当前事件传递并派发1个自定义双击事件evt.stopPropagation();evt.target.dispatchEvent(new PointerEvent(dbltouch, {cancelable: false,bubbles: true,}));// 也可以采用回调函数的方式this.callback this.callback(evt);}} else {this.prevPostion { pageX, pageY };// 阻止冒泡不让事件继续传播evt.stopPropagation();// 开始等待第2次点击this.isWaiting true;// 设置200ms倒计时200ms后重新派发当前事件this.timer setTimeout(() {this.isWaiting false;evt.target.dispatchEvent(evt);}, 200)}}
}只为需要实现双击逻辑的元素注册双击事件。可以通过传递回调函数的方式执行业务逻辑也可以通过监听dbltouch事件的方式也可以同时使用its up to you. const el document.querySelector(#dbltouch);
new RegisterDbltouchEvent(el, (evt) {// 实现双击逻辑
})本文转载于: https://juejin.cn/post/7274043371731796003 如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。
