在uniapp中实现长按事件(屏蔽点击事件)

这篇具有很好参考价值的文章主要介绍了在uniapp中实现长按事件(屏蔽点击事件)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在uniapp中实现长按事件(屏蔽点击事件)

问题

  • 在uniapp使用官方提供的长按点击事件时会触发点击事件
<view @longpress="longpress">
    <text>点击我</text>
</view>
longpress() {
		console.log("长按事件");
},

这样使用在元素上只绑定了长按事件时没有任何问题,但如果元素上同时绑定的单击事件就无法区分

解决

原理
  • 点击事件在点击结束后才会触发。
  • 长按事件在点击持续一定时间后就会触发
方案

我们可以定义一个记录是否是长按的变量,在触发点击事件后判断是否触发了长按。如果是就什么都不做,如果不是正常执行逻辑。文章来源地址https://www.toymoban.com/news/detail-601684.html

代码

	<!--  @touchend 是为了在点击结束后执行将记录长按变量重写变为 false,等待下一次点击 -->
<view @longpress="longpress" @click="click()" @touchend="touchend">
      <text>点击我</text>
</view>
export default {
		data() {
            return {
				islongPress: false, //长按记录变量
			};
		},
		methods: {
           longpress(){
               console.log("长按事件");
               this.islongPress = true;
           },
           click(){
               if(this.islongPress == false){
                   console.log("不是长按事件");
               }else if(this.islongPress == true){
                   console.log("长按事件");
               }
           },
           touchend(){
               //延时执行为了防止 click() 还未判断 islongPress 的值就被置为 fasle
                setTimeout(() => {
					this.islongPress = false
				}, 200)
           }
        }
}

到了这里,关于在uniapp中实现长按事件(屏蔽点击事件)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包