webview长按事件js监听

做app开发时,用到了webview,需要监听webview的长按事件,使用原生的js处理监听如下:

var timeOutEvent = 0; //定时器 
    //开始按 
    function gtouchstart() {
        timeOutEvent = setTimeout("longPress()", 500); //这里设置定时器,定义长按500毫秒触发长按事件,时间可以自己改,个人感觉500毫秒非常合适 
        return false;
    };
    //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件 
    function gtouchend() {
        clearTimeout(timeOutEvent); //清除定时器 
        if (timeOutEvent != 0) {
            //这里写要执行的内容(尤如onclick事件) 
            //alert("你这是点击,不是长按");
        }
        return false;
    };
    //如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按 
    function gtouchmove() {
        clearTimeout(timeOutEvent); //清除定时器 
        timeOutEvent = 0;
    };

    //真正长按后应该执行的内容 
    function longPress() {
        timeOutEvent = 0;
        //执行长按要执行的内容,如弹出菜单 
        //alert("长按事件触发");
        do_Page.fire("showTool",{"index":index,"url":images[index].source});
    }

这里设置500ms点击为长按处理,主要用到了3个事件:

ontouchstart、ontouchmove、ontouchend,主要思路:

在ontouchstart事件中启动一个定时器,定时器间隔时间为500ms,即500ms后自动执行longPress逻辑,并清除定时器事件,ontouchend表示tap弹起,这时直接清除定时器,ontouchmove表示手指滑动,直接清除定时器即可,这样就简单实现了长按事件监听处理。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏田超学前端

微信小程序 搜索历史记录缓存到本地

先说下需求,想做的效果是这样的:有个搜索框,下面是记录 搜索的关键字。由于小程序未采用登录注册,所以,搜索记录不方便保存在服务端,于是乎,前端需要记录到缓存里,...

1264
来自专栏AI研习社

一个快速方便的图形化 Python 调试器 —— birdseye | Github 项目推荐

Birdseye 是一个简单快速的 Python 调试器,它可以在函数的调用中记录表达式的值,并且在退出函数后轻松查看。例如: ? 它不是通过逐行浏览来查看表达...

3286
来自专栏前端说吧

JS-DOM2级封装练习题--点击登录弹出登录对话框

2977
来自专栏自动化测试实战

flask第二十篇——模板【3】

2206
来自专栏LEo的网络日志

tempfile.NamedTemporaryFile创建临时文件在windows没有权限打开

3488
来自专栏前端小叙

vue父组件向子组件动态传值的两种方法

在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行...

40810
来自专栏深度学习自然语言处理

实例快速上手shell脚本

昨天老师给了宗林师兄任务,让我跑一个机器翻译的程序。我看了看就是跑shell脚本。刚开始一看。。我的天。。好长的代码,但是觉得这个时候就更不能怕,得迎难而上,趁...

3409
来自专栏光变

Vim实现批量注释的方法

调试代码的时候,免不了要批量注释/取消代码注释,很多IDE都有快捷键将你选中的…

811
来自专栏机器学习从入门到成神

SpringMVC的JSP页面中中EL表达式不起作用的问题解决

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

831
来自专栏前端知识分享

第79天:jQuery事件总结(二)

       上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。

702

扫码关注云+社区