input的失焦事件和click事件冲突问题

自己个人遇到在手机端遇到问题
问题一

描述:在input输入框得焦的状态下,点击button的click事件时,页面执行了blur(虚拟键盘消失),而没有执行click事件
原因:因为blur优先级大于click,所以导致click没执行,要再点击才执行

解决方法就是使用下面笔记的方法二
这样就可以优先执行mousedown 再执行blur事件

问题二:

描述:在input输入框得焦的状态下,点击(div)绑定的(click或mousedown ),事件(请求接口的事件),不知道为什么用问题一的解决方法把click改为mousedown事件没用,(过程是输入款执行了失去焦点(虚拟键盘隐藏),只有再点击事件(请求接口的事件)才会触发)
注:问题一是button标签,问题二是div标签,自己测试发现移动端div的用mousedown没用
想要的效果:点击下单按钮让输入款失焦,虚拟键盘隐藏,事件成功执行

解决方法:直接给事件加 $(‘input’).blur() 让所有input都失焦,(也可以自己指定input)

笔记:
网上找的答案一共差不多都是说两种
转载链接:https://www.cnblogs.com/web-record/p/10075375.html
第一种:使用setTimeOut倒计时定时器

$(function(){
  $(".cy-name-input input").on({
    focus:function() {
      $(".cy-close").css('display','block');
    },
    blur:function() {
      setTimeout(function(){
        $(".cy-close").css('display','none');
      },0)
    }
  })
  $(".cy-close").click(function(){
    $(".cy-name-input input").val('');
  })
})

第二种:给按钮加mousedown 方法
理由是:事件执行的优先级顺序问题:mousedown > blur > click

// html
<input type="text" autofocus="autofocus">
<button>点击我文本输入框不会失去焦点</button>

// javascript
var btn = document.querySelector('button')
btn.onmousedown = function(event) {event.preventDefault()}
### 解决 el-input 失焦事件影响点击事件问题 当 `el-input` 组件中的输入失去焦点(blur 事件)时,可能会干扰后续的点击事件处理逻辑。为了防止这种情况发生,可以采取以下几种方法来优化事件处理机制: #### 方法一:延迟触发失焦事件 通过设置一个短暂的时间间隔来延迟执行失焦操作,从而避免立即响应导致的影响。 ```javascript let timeoutId; const handleBlur = () => { clearTimeout(timeoutId); timeoutId = setTimeout(() => { console.log('Input blurred'); }, 200); // 延迟200毫秒再真正触发blur事件 }; ``` 这种方法可以在一定程度上减少误触的情况[^1]。 #### 方法二:阻止冒泡行为 如果发现点击按钮的同时也触发了父级元素上的其他事件,则可以通过停止事件传播的方式来解决问题。 ```html <template> <div @click="handleOuterClick"> <!-- 输入 --> <el-input ref="inputRef" v-model="value"></el-input> <!-- 按钮 --> <button type="button" @click.stop="handleButtonClick">Submit</button> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; const value = ref(''); function handleButtonClick() { console.log('Button clicked!'); } function handleOuterClick(event) { const inputElement = document.activeElement as HTMLElement | null; if (inputElement && !event.target.contains(inputElement)) { console.log('Outside element clicked, but not the button.'); } } </script> ``` 此方案利用了 Vue 的修饰符 `.stop` 来中断事件链路,确保只有目标元素接收到相应的交互指令[^2]。 #### 方法三:调整 z-index 层叠顺序 对于某些特定布局下的组件组合,适当调节各层之间的显示优先级也可能有助于缓解此类冲突现象。不过这通常适用于更复杂的应用场景下,并不是首选解决方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值