首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS案例 - 基于vue的移动长按手势

别急~ 长按功能原理分析一波: 所谓的长按其实就是手指按下去,不移动,超过一定时间才把手指拿开的一个过程(我说的好有道理哈哈哈。然后听到一片同一个声音:废话!!)。...监听手指按下去后是否有移动,就该touches上场了,监听他的clientX,clientY只要没变就是没移动。 并且在这个过程中,还会不时地有地方的英雄冒出来干扰我们补兵。...那就是一个手机自带的效果了:   长按时,在移动触摸文字,(至少ios里)会出现选择文字等干扰我们的真正功能,用了preventDefault()这个属性后就没有了。...如果移动了,那不能算长按事件(不过这个也看产品需求,如果按住也要触发长按规定那个逻辑的话,这不要判断) if (x != e.touches[0].clientX || y !...// 那么移动的话,先要清除事先埋伏的定时器timer1.要不然,虽然不是长按事件但是倒计时还在进行中。

9.1K30

使用原生 JS 复制文本兼容移动 iOS & android

注意事项 使用 JS 实现复制功能并不是很难,但是有几个需要注意的地方。 首先文本只有选中才可以复制,所以简单的做法就是创建一个隐藏的 input,然后绑定需要复制的文本。...另外如果将 input 设置为 `type="hidden" 或者 display:none 则无法选中文本,也就无法复制,可以设置 position:absolute;left:-999px; 来隐藏文本域...const copyInput = document.querySelector('#copyInput'); copyInput.value = '需要复制的文本'; copyInput.select...input.setSelectionRange(0, input.value.length); document.execCommand('Copy'); document.body.removeChild(input); } 移动禁止键盘弹出.../> $("#box").focus(function(){ document.activeElement.blur(); }); 关于粘贴:除了 IE,现代化的浏览器暂时无法读取剪贴板里的内容

8.9K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Vue 2.x 移动长按事件实现方式

    vue 移动长按事件实现的几种方法的总结 大家好啊,我是你们的攻城狮,我是 Ken,人贱贱爱的前端攻城狮,我要告诉你个严重的问题,这几天心情低落,代码撸不动啊,结果今天一到公司,打开禅道,大家可能不知道什么是...就是尼玛的兼容,尤其是有一个顽固的浏览器,IE,这个千刀万剐的家伙,祸害了多少代的程序猿,哈哈,幸好的是我们只需要兼容移动,pc 的网站需要兼容 ipad 。 接下来看看是什么问题?...原来是在 pc 右键菜单不能出现了,我一看原来是没有兼容移动的事件,因为在 pc 我们只需要使用 @contextmenu 这个事件就可以实现右键菜单的出现了, 当然在此之前我们需要实现一个菜单组件...,因为移动不像 pc 一样有鼠标事件,移动只有触摸事件: 今天我们处理 bug 的使用最简单的一种方式,就是使用 @touchstart,@touchend: // 实现移动长按出现右键菜单 start...所以这样处理完成之后,我们可以在 ipad 看到当我们手指长按 iPad 屏幕的时候,右键菜单就会出现了。 ? 以上就是移动长按实现右键菜单。

    1.3K30

    WebView自定义长按选择,实现收藏分享选中文本

    效果图(1.3M) 一、前言 **** 戳这里可以去DEMO,来吧 ** ** 相信刚接触android不久的同志们,在面对产品提出的 : “自定义WebView页面中,长按文本的弹出选项、点击选择后...,分享、转发、收藏选择文本” 这样的需求时,第一反应大部分是:这是系统行为,如果实现需要在web实现。...但是web实现的局限性太大,曾经也有过监听系统粘贴板,在用户点击复制的时候实现其他的逻辑,但是这样用户体验不好,所以自定义WebView中长按的弹出菜单,并在点击时返回选中文本的小控件闪亮登场┏ (ω...这两个方法会在用户长按选择web文本时,在弹出菜单前被调用。它们之间的区别在于,第一个方法的菜单弹出方式,指定了默认的type。.../** * 点击的时候,获取网页中选择文本,回掉到原生中的js接口 * @param title 传入点击的item文本,一起通过js返回给原生接口 */ private void getSelectedData

    2.6K20

    html5移动禁止长按图片保存的实现

    移动访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片。那该如何实现呢?下面给出3种解决方案。...方案一:使用 pointer-events:none img{ pointer-events:none; } 亲测有效,适用于微信客户的手机页面,图片被打开的情况 方案二:全局css属性 *...moz-user-select: none; -ms-user-select: none; user-select: none; } -webkit-touch-callout 主要用于禁止长按菜单...user-select 属性是css3新增的属性,用于设置用户是否能够选中文本。...opacity: 0; } .imgbox img{ display: block; width: 100%; } 图片上边加一层div类似于遮罩层,这样图片就不会被点击,右击或长按也不会出现如图的图片另存为的选项了

    3.7K30

    移动app开发,框架的选择

    从事java开发快三年了,最近公司因项目要求需要做一款app,个人对这方面兴趣比较大,于是网上收集资料,框架的选择,技术的论证,到今天项目需求的各个功能都做出了相应的demo同时也打好了框架,接下来就是完成细节的部分了...框架的选择,因为一直在关注前端方面的知识,也在学习前端,nodejs、 agularjs、bootstrap、有所涉猎,在项目中前端也用到jquery easyui html5另外html5最近比较火也打算从前端入手...提供数据的双向绑定,使用它成为Web和移动开发者的共同选择。即将发布的AngularJS 2.0将会专注于移动开发,相信IONIC一定会取得不错的成就 。...就在那一年,PhoneGap获了奖并开始支持Android平台,对人数不断增长的移动开发人员变得越来越有用,这些人员需要在更多的平台上获得代码支持。...框架我最后选择ionic ,ionic集成cordova,在ionic中的ngcordova 可以对原生设备的调用。

    3.5K10

    picker-extend 移动级联选择插件

    picker-extend.js 一款多功能的移动滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数...特性 原生js移动选择控件,不依赖任何库 可传入普通数组或者json数组 可根据传入的参数长度,自动渲染出对应的列数,支持单项到多项选择 自动识别是否级联 选择成功后,提供自定义回调函数callback...对三级联动地区 - 增加推荐字样(特殊化展示) 简书 picker-extend 移动级联选择插件(简书) 掘金 picker-extend 移动级联选择插件(掘金) npm 地址...picker-extend 移动级联选择插件 (npm) 引入 方式一 标签引入: <link rel="stylesheet" type="text/css" href="css/picker-extend.css...cancelBtnText '取消' String 取消按钮的<em>文本</em><em>内容</em> ensureBtnColor '#1e83d3' String 确认按钮的<em>文本</em>颜色 cancelBtnColor '#666666

    4.5K10

    通过jquery库扩展移动长按触发’事件(模拟浏览器‘长按识别二维码’功能)

    上一篇讲了如何通过qrcode.js解析二维码(图片),那么现在我们要实现的功能就是最开始的要求'长按识别二维码'这个功能!...e.preventDefault(); }; 注意此处不能采用: window.ontouchstart = function (e) { e.preventDefault(); }; 原因是:部分移动浏览器会将页面中其他的事件同时都阻止...,web浏览器在谷歌测试没有问题!...但是即便如此还是遇到一些情况: (1),进入浏览器后你直接长按依然会触发浏览器默认事件,如果等一下再去长按就不会触发浏览器的默认事件,会直接触发我们自定义的事件。...解决办法:将该段组织浏览器默认事件的代码直接放到该元素的后边,当然页面如果内容很多,一般不会出现该情况! (2),苹果手机的浏览器默认事件没有阻止。

    1.4K10
    领券