先执行失去焦点事件再执行点击事件解决办法

最近在开发微信小程序添加用户收货地址时,产品经理提了需求:
失去焦点时,清除按钮消失;
点击清除按钮时,将输入框内容清除;

然后我就按照这个逻辑开始开发了,但是开发完后,并没有达到预期的效果:第一次点击清除按钮时,输入框的内容并没有消失,而清除按钮却不见了,又点击了一次输入框,然后输入框的内容就消失了。后来经过调试发现,第一次点击清除按钮时只触发了失去焦点事件,并没有触发点击事件,又在其他地方点击,这时输入框的内容就消失了。
然后就猜测是优先触发了失去焦点事件。
解决办法:
就是对失去焦点事件进行延迟触发,使用setTimeout,此坑及解决方法,同样会在微信小程序外出现和适用,代码如下:
addressAdd.wxml

<input type="text" placeholder="姓名" value="{{name}}"  bindinput="handelChange" bindfocus="showClear" bindblur="hideClear"/>
<view bindtap="close">
  <image wx:if="{{name.length>0 && showClear}}" mode="scaleToFill" src="../images/close.png"/>
</view>

addressAdd.js

Page({
  data: {
  		name: '',
  		showClear: false
  },
  handelChange(e) {
   		this.setData({
   			name: e.detail.value
		})
  },
  //清空文字
  close(e) {
        this.setData({ 
        	name: '' 
        });
  },
  //获取焦点,显示清空按钮
  showClear(e) {
	this.setData({
  		showClear: true
    })
  },
  //失去焦点,隐藏清空按钮
  hideClear(e) {
    setTimeout(() => {
    	this.setData({
     		showClear: true
   		})
    }, 100)
  }
})
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值