资讯专栏INFORMATION COLUMN

模拟长按事件

ShowerSun / 2240人阅读

摘要:如果你想在监测到用户在微信浏览器中长按图片的动作并进行统计,可以使用以下方法你的操作但是这种方法在安卓微信浏览器中,当事件持续到弹出选择框后,事件会被中断,所以可以采取下一种方法已长按没长按

如果你想在监测到用户在微信浏览器中长按图片的动作并进行统计,可以使用以下方法:

let $div = document.getElementById("divContent");
let startTime = 0;
$div.addEventListener("touchstart", function () {
    startTime = +new Date();
})
$div.addEventListener("touchend", function () {
    let endTime = +new Date();
    if (endTime - startTime > 600) {
        //你的操作
    }
})

但是这种方法在安卓微信浏览器中,当touchstart事件持续到弹出选择框后,touchend事件会被中断,所以可以采取下一种方法:

let $div = document.getElementById("divContent");
let startTime = false;
$div.addEventListener("touchstart", function () {
    startTime = true;
    setTimeout(function(){
        if (startTime) {
            console.log("已长按")
        } else {
            console.log("没长按")
        }
        startTime = false;
    }, 500)
})
$div.addEventListener("touchend", function () {
    startTime = false;
})
$div.addEventListener("touchmove", function () {
    startTime = false;
})

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101131.html

相关文章

  • 移动端h5模拟长按事件

    摘要:为啥写这篇文章最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在上很常见,但是在移动端中,我们没有长按的事件,所以就需要自己模拟这个事件了。由此我们可以实现模拟的长按事件了。 为啥写这篇文章 最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常见,但是在移动端h5中,我们没有长按的事件,所以就需要自己模拟这个事件了。 大概效果如...

    李昌杰 评论0 收藏0
  • 移动端h5模拟长按事件

    摘要:为啥写这篇文章最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在上很常见,但是在移动端中,我们没有长按的事件,所以就需要自己模拟这个事件了。由此我们可以实现模拟的长按事件了。 为啥写这篇文章 最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常见,但是在移动端h5中,我们没有长按的事件,所以就需要自己模拟这个事件了。 大概效果如...

    付伦 评论0 收藏0
  • 原生js实现移动端点击、长按、左滑、右滑、上滑、下滑等事件模拟

    摘要:原理如下监听的和事件。代表的绝对值,左右滑动,右滑,反之左滑。代码如下用事件模拟点击左滑右滑上拉下拉等时间,是利用和两个事件发生的位置来确定是什么操作。支持六个事件是左滑事件,是右滑事件,是上滑事件,下滑事件,点击事件,长按点击事件。 github地址:https://github.com/xubaodian/...为什么要模拟这些事件?1、上述这些事件中,浏览器直接支持的事件只有点击...

    WrBug 评论0 收藏0
  • 移动端页面功能之------长按事件

    摘要:有时在做移动端页面开发过程中遇到这种需求模拟指纹识别。实际上我们只能通过长按页面中的元素来模拟这个功能。在和中都没有包含长按事件,所以需要我们来扩展一下。 有时在做移动端页面开发过程中遇到这种需求:模拟指纹识别。实际上我们只能通过长按页面中的元素来模拟这个功能。在jQuery和Zepto中都没有包含长按事件,所以需要我们来扩展一下。 $.fn.longPress = function(...

    sf_wangchong 评论0 收藏0
  • AlloyFinger web 手势学习

    摘要:从长按开始学习手势在项目开发过程中遇到有虚拟键盘开发的需求如下图,其中删除键需要实现长按删除输入框全部内容,由此展开今天要讨论的手势开发内容。所以长按手势实际上是由三者共同模拟的效果。 从 [长按] 开始学习 web 手势 在项目开发过程中遇到有虚拟键盘开发的需求(如下图),其中删除键需要实现 长按 删除输入框全部内容,由此展开今天要讨论的 web 手势 开发内容。 showImg(h...

    seanlook 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<