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. Ant+Jmeter自动化接口测试的部署 及 部署过程中的坑

    一.环境准备: 1.Jdk1.6或以上:http://www.oracle.com/technetwork/java/javase/downloads/index.html    配置环境变量-系统变 ...

  2. window.open子窗口获取父窗口的值

    //子窗口获取父窗口id的值 window.opener.document.getElementById("id").value; //子窗口调用父窗口的函数 window.ope ...

  3. java web项目为什么我们要放弃jsp?

    前戏: 以前的项目大多数都是java程序猿又当爹又当妈,又搞前端(ajax/jquery/js/html/css等等),又搞后端(java/mysql/Oracle等等). 随着时代的发展,渐渐的许多 ...

  4. java基础篇---HTTP协议

    java基础篇---HTTP协议   HTTP协议一直是自己的薄弱点,也没抽太多时间去看这方面的内容,今天兴致来了就在网上搜了下关于http协议,发现有园友写了一篇非常好的博文,博文地址:(http: ...

  5. 【C语言】 二叉树的基本运算

    • 二叉树节点类型BTNode: typedef struct node { char data; struct node *lchild, *rchild; } BTNode; 创建二叉树 void ...

  6. ***php进行支付宝开发中return_url和notify_url的区别分析

    本文实例分析了php进行支付宝开发中return_url和notify_url的区别.分享给大家供大家参考.具体分析如下: 在支付宝处理业务中return_url,notify_url是返回些什么状态 ...

  7. springbank 开发日志 Spring启动过程中对自定义标签的处理

    这篇随笔的许多知识来源于:http://www.importnew.com/19391.html 之所以会去看这些东东,主要是希望能够模仿spring mvc的处理流程,做出一套合理的交易处理流程. ...

  8. Ubuntu安装VirtualBox以及CentOS7.5联网设置

    一.virtualBox的安装 官方Liunx版本下载地址:  https://www.virtualbox.org/wiki/Linux_Downloads 这里选择下载ubuntu 16.04  ...

  9. NDK 开发实例一(Android.mk环境配置下)

         在我写这篇文章的时候,Android Studio已经是2.3版本了,已经集成CMake 编译工具, 用户只需在 新建项目的时候,添加选项(Include C++ support),Andr ...

  10. HDU Tody HDU2112

    不想用floyd了 也不一定适合  floyd只能处理小数据 dijkstra算法 wa了很久   一个是dijkstra里面的u   导致RE了无数次   下标溢出 还有就是注意细节  当起点和终点 ...