资讯专栏INFORMATION COLUMN

移动端页面功能之------长按事件

sf_wangchong / 3447人阅读

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

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

</>复制代码

  1. $.fn.longPress = function(fn) {
  2. var timeout = undefined;
  3. var $this = this;
  4. for(var i = 0;i<$this.length;i++){
  5. $this[i].addEventListener("touchstart", function(event) {
  6. timeout = setTimeout(fn, 800); //长按时间超过800ms,则执行传入的方法
  7. }, false);
  8. $this[i].addEventListener("touchend", function(event) {
  9. clearTimeout(timeout); //长按时间少于800ms,不会执行传入的方法
  10. }, false);
  11. }
  12. }

首先要添加这段代码,然后调用:

</>复制代码

  1. $(".object").longPress(function(){
  2. //do something...
  3. });

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

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

相关文章

  • 微信开发微信jssdk录音功能开发

    项目需求简单描述 用户长按录音,松手后直接结束录音,结束录音后,用户可以选择重新录音、播放刚才的录音,上传录音(这里的上传录音指上传到自己服务器,上传步骤是,前端调用wx.uploadVoice,后台再到微信服务器下载音频文件,上传到自己的服务器)。注意,音频文件自上传时间算起在微信服务器的有效期为3天。由于后台从微信服务器下载的音频文件是amr格式的,需要后台先把amr文件转换成MP3,前端用a...

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

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

    WrBug 评论0 收藏0
  • 移动h5模拟长按事件

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

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

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

    付伦 评论0 收藏0
  • 移动

    摘要:纯,隐藏滚动条,保留鼠标滚动效果。中弹性拉伸的现象解决禁用那个层或者的事件的默认行为禁用音视频自动播放这个是苹果官方明确提出的,为了用户的利益。所以的浏览器依然是死角,不能做到自动播放。 只是一个文档总结,纯粹是喜欢SF的Markdown。 HTML CSS X轴上采用百分比 字体大小以及部分不能用百分比衡量者,采用REM单位 JS 配置页面根font-size大小 (f...

    lowett 评论0 收藏0

发表评论

0条评论

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