input中blur失去焦点事件与点击事件冲突

article/2025/8/22 21:31:45

场景:

当在输入框里输入手机号的时候,输入框高亮,并且关闭按钮显示,input失焦时关闭按钮隐藏
在这里插入图片描述

现象:

遇到的问题是,当我们点击关闭按钮清空input框数据时,发现只是关闭按钮隐藏了,数据并没有清空

方案:

经过debugger和查阅资料得出结论:输入框input的blur事件与关闭按钮的click事件的冲突了,在click的时候会先触发blur事件,没有触发click

原因:

由于JavaScript为单线程,同一时间只能执行处理一个事件。“blur优先于click执行”。而在本示例中,由于blur处理程序,会将对关闭按钮隐藏,导致后续关闭按钮的click事件并不会执行。
解决方案1:setTimeout
setTimeout:对blur事件进行延迟,让click先执行。

  $(".tel-input").on({blur:function() {setTimeout(function(){$(".tel-close").hide();},0)}})$(".tel-close").click(function(){$(".tel-input").val('');})

解决方案2:mousedown 事件
给按钮click事件替换为 mousedown 事件,优先于blur事件执行,并在其中 event.preventDefault()

$(".tel-close").mousedown(function(event) {event.preventDefault()
});

当我们点击按钮的时候,文本框失焦,这是浏览器的默认事件。当你点击按钮的时候,会触发按钮的 mousedown 事件,mousedown 事件的默认行为是使除了你点击的对象之外的有焦点的对象失去焦点。所以要在 mousedown 事件中阻止默认事件
其执行顺序为:mousedown >> click


http://chatgpt.dhexx.cn/article/GUjMD7m7.shtml

相关文章

div失去焦点事件onblur()不触发解决方法

需求: 做一个弹出框组件,文字点击时会在文字下方弹出一个框,在vue3中监听div元素的blur事件发现事件并不会在div失去焦点时触发 解决方法 bug原因:在vue中div默认不触发事件,除非将元素添加tabindex"-1"属性才会触发…

JavaScript学习(二十一)——表单相关事件(焦点事件)

表单事件实际上就是对元素获得或失去焦点的动作进行控制。可以利用表单事件来改变获得或失去焦点的元素样式,这里所指的元素可以是同一类型,也可以是多个不同类型的元素。 获取焦点与失去焦点事件 获得焦点事件(onfocus) 是当某个元素获得焦点时触发事件…

特征工程 - 数据分析 - 峰度 and 偏度

特征工程 - 数据分析 - 峰度 and 偏度 偏度峰度 偏度 偏度&#xff08;Skewness&#xff09;用来描述数据分布的对称性。 当偏度 <0 时&#xff0c;称为负偏&#xff0c;数据出现左侧长尾&#xff1b;当偏度>0时&#xff0c;称为正偏&#xff0c;数据出现右侧长尾。 正态…

python金融分析小知识(6)——偏度与峰度的计算

Hello 大家好&#xff0c;我是一名新来的金融领域打工人&#xff0c;日常分享一些python知识&#xff0c;都是自己在学习生活中遇到的一些问题&#xff0c;分享给大家&#xff0c;希望对大家有一定的帮助&#xff01; 相信大家在平时的统计分析中&#xff0c;一定会用到数组偏…

使用Excel计算峰度(Kurtosis)和偏度(Skewness)

峰度&#xff08;Kurtosis&#xff09;和偏度&#xff08;Skewness&#xff09; 峰度是描述总体中所有取值分布形态陡缓程度的统计量。计算公式是&#xff1a; 在Excel中的公式是&#xff1a;KURT 因为是与标准正态分布比较&#xff0c;而标准正态分布的四阶矩为3&#xff0c;…

Resnet解读

pytorch的resnet模块在torchvision的models中。 里面可以选择的resnet类型有&#xff1a; _all_列表的每一个resnet都提供了实现的函数&#xff1a; def resnet18(pretrainedFalse, progressTrue, **kwargs):"""Constructs a ResNet-18 model.Args:pretrained …

ResNet算法

Daily learning2 Q1&#xff1a;过拟合&#xff08;overfitting&#xff09;&#xff0c;欠拟合&#xff08;underfitting&#xff09;&#xff1f; A1:欠拟合&#xff1a;根本原因是特征维度过少&#xff0c;模型过于简单&#xff0c;导致拟合的函数无法满足训练集&#xff0c…

Resnet代码详解

这篇文章是用来讲解Resnet(残差网络)代码的&#xff0c;结合代码理解残差网络结构。 目录 Bottleneck类 Conv33 Conv11 BasicBlock ResNet _make_layer代码解析 完整的ResNet代码&#xff1a; 可以直接调用torch内置的resnet官方代码。 from torchvision.models impo…

ResNet结构的pytorch实现

文章目录 1.ResNet的创新1&#xff09;亮点2&#xff09;原因 2.ResNet的结构1&#xff09;浅层的残差结构2&#xff09;深层的残差结构3&#xff09;总结 3.Batch Normalization4.参考代码 1.ResNet的创新 现在重新稍微系统的介绍一下ResNet网络结构。 ResNet结构首先通过一个…

Resnet论文解读

摘要&#xff1a; 提出了一种残差结构&#xff0c;这些残差网络的集合在ImageNet测试集上实现了3.57%的误差。该结果在ILSVRC 2015分类任务中获得第一名。 介绍&#xff1a; 主要讲述的就是针对 深度越深&#xff0c;精确度达到了一种饱和的状态&#xff0c;然后就会产生退化…

了解ResNet

产生背景 网络的层数越多&#xff0c;就能够提取更多的特征&#xff0c;但是如果只是简单的增加深度&#xff0c;就会导致梯度爆炸。也有文章提出&#xff0c;解决该问题的方法是正则化初始化和中间的正则化层&#xff0c;但是这样会导致另一个问题&#xff0c;退化,网络的层数…

ResNet网络

1.1.ResNet的提出 残差网络(ResNet) 是由来自Microsoft Research的4位学者提出的卷积神经网络&#xff0c;在2015年的ImageNet大规模视觉识别竞赛&#xff08;ImageNet Large Scale Visual Recognition Challenge, ILSVRC&#xff09;中获得了图像分类和物体识别的优胜。 网络…

ResNet详解——通俗易懂版

ResNet学习 什么是ResNet为什么要引入ResNet&#xff1f;ResNet详细解说 本篇博客主要是自己对论文的一些解读以及参考一些博客后的理解&#xff0c;如若有不对之处&#xff0c;请各位道友指出。多谢&#xff01; 2015年刚提出ResNet的Paper 2016对ResNet进行改进之后的Paper …

CNN经典网络模型(五):ResNet简介及代码实现(PyTorch超详细注释版)

目录 一、开发背景 二、网络结构 三、模型特点 四、代码实现 1. model.py 2. train.py 3. predict.py 4. spilit_data.py 五、参考内容 一、开发背景 残差神经网络(ResNet)是由微软研究院的何恺明、张祥雨、任少卿、孙剑等人提出的&#xff0c; 斩获2015年ImageNet竞赛…

ResNet详解+PyTorch实现

1.Resnet简介 深度残差网络&#xff08;Deep residual network, ResNet&#xff09;的提出是CNN图像史上的一件里程碑事件&#xff0c;由于其在公开数据上展现的优势&#xff0c;作者何凯明也因此摘得CVPR2016最佳论文奖。 Resnet是残差网络(Residual Network)的缩写&#xff…

点估计

1.说明&#xff1a; 设总体 X 的分布函数形式已知, 但它的一个或多个参数为未知, 借助于总体 X 的一个样本来估计总体未知参数的值的问题称为点估计问题. 在统计问题中往往先使用最大似然估计法, 在最大似然估计法使用不方便时, 再用矩估计法. 2.常用构造估计量的方法 1&#…

【应用统计学】参数统计-点估计与估计量的评价标准

一、点估计 参数的点估计就是根据样本构造一个统计量&#xff0c;作为总体未知参数的估计。这个统计量称为未知参数的估计量。 在统计中&#xff0c;经常使用的点估计量有: 二、估计量的评价标准 1、无偏性 无偏性即指估计量抽样分布的数学期望等于总体参数的真值。 2、有效…

功能点估算方法,如何让估算偏差更小?

1、何为软件功能点 ​ ​软件功能点是站在业务角度对软件规模的一种度量&#xff0c;功能点的多少代表软件规模的大小&#xff0c;这里说的功能点是标准的功能点&#xff0c;按照标准的估算方法&#xff0c;每个人对特定需求估算出的功能点数是一致的。 功能点估算方法&…

三点估算法

施工时间划分为乐观时间、最可能时间、悲观时间 乐观时间:也就是工作顺利情况下的时间为a 最可能时间:最可能时间&#xff0c;就是完成某道工序的最可能完成时间m 悲观时间:最悲观的时间就是工作进行不利所用时间b。 活动历时均值(或估计值)(乐观估计4最可能估计悲观估计)/6 …

点估计、区间估计(利用回归方程进行预测)

回归模型经过各种检验并标明符合预定的要求后&#xff0c;可利用它来预测因变量。预测&#xff08;predict&#xff09;是指通过自变量x的取值来预测因变量y的取值。 1、点估计 利用估计的方程&#xff0c;对于x的一个特定值 ,求出y的一个估计值就是点估计。点估计分为两种&…