JQuery长按事件
16lz
2022-06-02
页面中使用JQuery实现长按事件
实例
<!DOCTYPEHTML><htmllang="en-US"><head><metacharset="UTF-8"><metaname="MobileOptimized"content="320"><title></title></head><styletype="text/css">.box{width:100%;height:200px;border:1pxsolid#ccc;text-align:center;font-size:30px;color:#000;}</style><body><divclass="box"><p>点击/长按</p><p>操作：<spanclass="res"></span></p></div></body><scriptsrc="https://www.php.cn/static/js/jquery-1.8.3.min.js?1.8.3"></script><scripttype="text/javascript">$(".box").on({touchstart:function(e){varoSpan=e.currentTarget.lastElementChild//长按事件触发timeOutEvent=setTimeout(function(){timeOutEvent=0;console.log('你长按了');$(".res").text("你长按了")},500);},touchmove:function(){clearTimeout(timeOutEvent);timeOutEvent=0;},touchend:function(){clearTimeout(timeOutEvent);if(timeOutEvent!=0){console.log('你点击了');$(".res").text("你点击了")}returnfalse;}})</script></html>运行实例 »
点击 "运行实例" 按钮查看在线实例
更多相关文章
- 使用Eclipse开发Android
- Android(安卓)带有弹出收缩动画的扇形菜单实例
- [Android] AsyncTask使用实例---加载网络图片
- android 日期选择器自由天数内展示
- 如何防止android Toast重复显示？
- Win7上Git安装及简单配置过程
- Android(安卓)requires compiler compliance level 5.0 or 6.0.
- Android(安卓)增量更新实例（Smart App Updates）
- Android之键盘点击事件