如题
如果两个input是由同一个数组循环出来的，那个它们的blur事件是相同的，这时候点击一个input后，通过点击另外一个input去失焦第一个input，再去点击弹窗的确认按钮，这个时候失焦事件就会触发两次，我想点击第二个时，只触发第一个失焦事件，不触发第二个，这种情况有什么好的解决办法么
极客观点
项目管理
HarmonyOS
const arr = [1,2,3];
const blur = () => {
window.alert('失焦')
}
arr.map((item, index) => {
return <Input onBlur={() => blur()} />
})
这里其实用到节流函数
给一个时间间隔假如是2s和一个标志timeout用来验证是否超过规定时间2s,第一个input框失去焦点开始计时在2s内将不会执行其他input的onblur事件，当然这里的2s可以更改，不知道是否是楼主所需的答案。
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
<script>
// 节流函数
let timeout;
function throttle(func, wait) {
return function() {
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(this, arguments)
}, wait)
}
}
}
const input = document.querySelectorAll('input');
input.forEach((item, index) => {
item.onblur = function() {
throttle(function(){
console.log(1);
},2000)();
}
})
</script>10 回答11.3k 阅读
5 回答4.9k 阅读✓ 已解决
4 回答3.2k 阅读✓ 已解决
2 回答2.8k 阅读✓ 已解决
3 回答2.4k 阅读✓ 已解决
3 回答2.2k 阅读✓ 已解决
2 回答2.7k 阅读✓ 已解决
只会触发一次啊。
当你去点
alert的确定时，你也失去焦点了，当然就会触发第二次啊，你换成console.log不就好了。。。demo