app,其中有长按LI列表弹出菜单,只要清楚五个方法就行:ontouchstart、ontouchmove、ontouchend、setTimeout、clearTimeout

1、首先在我们按下手指时触发:ontouchstart

2、当我们释放手指时触发:ontouchend

3、如果在按与放之间你没有为其定义事件,那么系统自动认为是onclick事件

4、所以我们要在按与放之间定义一个事件longPress,这里就要用定时器setTimeout。

5、但如果在按与放之间有手指有移动,你不能认为它是长按,这应该是用户想滑动,所以ontouchmove时要取消定义的那个长按事件,这时就要取消定时器clearTimeout。

实例如下:如果用户在500毫秒内没有放开手指,也没有移动手指,则触发长按事件

    <div ontouchstart="gtouchstart()" ontouchmove="gtouchmove()" ontouchend="gtouchend()">长按我</div>
    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("长按事件触发发");
}

ios webview下纯JS实现长按的更多相关文章

  1. ios webview下footer部分fixed失效问题

    场景: 如下图所示,一个很正常的页面需求,footer固定在底部,中间为滚动内容区 然后footer的css一般是这样的 footer{ position:fixed; bottom:; left:; ...

  2. 在webView 中使用JS 调用 Android / IOS的函数 Function

    最近做一个项目,混合了NativeCode 和 HTML,为了便于JS 调用App的一些方法,统一封装一个Js方法,记录如下 Android 端首先要再WebView中允许JS的调用 WebView ...

  3. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器(八)

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  4. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  5. iOS中UIWebView执行JS代码(UIWebView)

    iOS中UIWebView执行JS代码(UIWebView) 有时候iOS开发过程中使用 UIWebView 经常需要加载网页,但是网页中有很多明显的标记让人一眼就能看出来是加载的网页,而我们又不想被 ...

  6. 转载 【iOS开发】网页JS与OC交互(JavaScriptCore) OC ----->JS

      目标 本文介绍利用苹果在iOS7时发布的JavaScriptCore.framework框架进行js与OC的交互.我们想要达到的目标是: OC调用网页上的js方法 网页js调用APP中的OC方法 ...

  7. iOS Webview 实现修改javascript confirm 和 alert

    贴代码: @interface UIWebView (JavaScriptAlert) -(void) webView:(UIWebView *)sender runJavaScriptAlertPa ...

  8. 纯js异步无刷新请求(只支持IE)

    纯js异步无刷新请求 下载地址:http://pan.baidu.com/s/1slakL1F 所以因为非IE浏览器都禁止跨域请求,所以以只支持IE. <HTML> <!-- 乱码( ...

  9. [分享黑科技]纯js突破localstorage存储上线,远程抓取图片,并转码base64保存本地,最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制,单页应用最新黑科技

    好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localsto ...

随机推荐

  1. dubbo作为消费者注册过程分析--????

    请支持原创: http://www.cnblogs.com/donlianli/p/3847676.html   作者当前分析的版本为2.5.x.作者在分析的时候,都是带着疑问去查看代码,debug进 ...

  2. su和sudo命令详解

    我们知道,在Linux下对很多文件进行修改都需要有root(管理员)权限,比如对/ect/profile等文件的修改.很多情况下,我们在进行开发的时候都是使用普通用户进行登录的,尤其在进行一些环境变量 ...

  3. 关于java中生产者消费者模式的理解

    在说生产者消费者模式之前,我觉得有必要理解一下 Obj.wait(),与Obj.notify()方法.wait()方法是指在持有对象锁的线程调用此方法时,会释放对象锁,同时休眠本线程.notify() ...

  4. js获取iframe中的元素

    var obj=document.getElementById("iframe的name").contentWindow; var ifmObj=obj.document.getE ...

  5. python 全栈开发,Day108(客户管理之权限控制,客户管理之动态"一级"菜单,其他应用使用rbac组件,django static文件的引入方式)

    一.客户管理之权限控制 昨天的作业,有很多不完善的地方 下载代码,基本实现权限验证 https://github.com/987334176/luffy_permission/archive/v1.2 ...

  6. python 全栈开发,Day20(object类,继承与派生,super方法,钻石继承)

    先来讲一个例子 老师有生日,怎么组合呢? class Birthday: # 生日 def __init__(self,year,month,day): self.year = year self.m ...

  7. 【NPM】npm ERR! Unexpected end of JSON input while parsing near '...",'解决方案

    问题描述 今天安装项目依赖npm install 的时候出现错误: npm ERR! Unexpected end of JSON input while parsing near '...e&quo ...

  8. 【深入spring】IoC容器的实现

    本文乃学习整理参考而来 IoC概述: 在spring中,IoC容器实现了依赖控制反转,它可以再对象生成或初始化时直接将数据注入到对象中,也可以通过将对象引用注入到对象数据域中的方式来注入方法调用的依赖 ...

  9. Nginx 启动脚本,超级详细

    转载自:https://www.cnblogs.com/leffss/p/7845303.html

  10. BZOJ4977 八月月赛 Problem G 跳伞求生 set 贪心

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ4977 - 八月月赛 Problem G 题意 小明组建了一支由n名玩家组成的战队,编号依次为1到n ...