输入框blur事件和标签tap事件执行顺序在开发工具和手机上不一样
发布于 5 年前 作者 gongguiying 17972 次浏览 来自 问答

目前做的一个功能，输入框输入数字，失去焦点后数字要进行格式化，输入框后面有清除输入框数据的按钮，在输入数字后，让输入框不失去焦点，点击后面清除按钮，在开发工具中执行顺序为：输入框blur事件————>>>清除按钮的tap事件；但在手机上执行顺序：清除按钮的tap事件————>>>>>输入框blur事件。开发工具上体验正常，手机上体验差，想要的功能出不来。

开发工具执行顺序：

手机执行顺序：

4 回复

wechatide://minicode/Pb7wuhm765Zc 代码片段链接

麻烦给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题

真机和开发者工具的机制不一样，触发的顺序不一样，不能依赖事件的顺序做逻辑

建议setTimeout延后执行清除的逻辑~

<view class='flex my-box'>
  <view class='flex-1'>
    <input type='digit' value='{{changeValue}}' bindblur="changeFmt" placeholder='请输入数字'></input>
  </view>
  <view style='color:blue' bindtap='clearInput'>清除</view>
</view>
.flex {
  display: -webkit-flex;
  display: flex;
}
 
.flex-1 {
  flex: 1;
}
.my-box{
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  padding: 30rpx;
}
const app = getApp()
 
Page({
  data: {
    changeValue:'',
  },
  onLoad: function () {
    
  },
  changeFmt:function(e){
    console.log("失去焦点");
    this.setData({
      changeValue:666
    })
    console.log("失去焦点重设输入框的值："+this.data.changeValue);
  },
  clearInput:function(){
    console.log("清除方法");
    this.setData({
      changeValue: ''
    })
    console.log("清除输入框的值：" +this.data.changeValue);
 
  }
})
回到顶部