js中单击、双击和长按共存方案

最新推荐文章于 2023-05-27 15:54:03 发布

转载最新推荐文章于 2023-05-27 15:54:03 发布 · 984 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://github.com/fermion-boson/fclick

文章标签：

#javascript #html5 #前端

js 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种使用fclick库在JavaScript中同时处理单击、双击和长按事件的原生方法，该方法兼容多种浏览器，避免了双击触发单击事件的问题，并提供了具体的代码示例。

在javascript中，如果同时使用单击和双击事件，在双击的时候就会同时出发一次单击事件，在csdn里已经有很多利用jquery解决的办法了，在这里推荐一种同时兼容单击、双击以及长按的原生办法。

fclick

在这里使用到的是一个叫fclick的js库，调用的方法也非常简单，下面是例子

var fc=new fclick(document.getElementsByClassName('block'));
fc.single(function(e){
    //单击
    //e为event元素
    //e.target可以获取被点击的元素
    //e.clientX可以获取鼠标X轴位置，Y轴同理
    console.log("single"+e.clientX);
})
fc.double(function(e){
    //双击
    console.log("double"+e.target.getAttribute("id"));
})
fc.longPress(function(e){
    //长按
    console.log("longPress"+e.target.getAttribute("id"));
})