click和blur冲突的问题
2024-08-25 19:54:10
昨天在前端群里讨论到一个问题,大家平时做表单验证的时候一般都有个input框和删除按钮,然后习惯性在失去焦点的时候去验证输入的内容是否正确,做验证,发请求等等。这个时候,那个点击删除按钮往往也就触发了input的失去焦点事件,这个该咋解决呢,经过研究有以下2种方法;
1.
给失去焦点的时间加上延迟时间,让blur时间在click事件后执行,这个方法固然能够解决问题,但是本人并不是很推荐,因为影响性能,不到最后不用这个方法;
2.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DocumentDocument</title>
</head>
<body>
<input type="text" id="box01"/><input type="button" id="box02" value="删除"/>
<script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$("#box01").on("blur", function(event) {
console.log(event.relatedTarget.id=='box02');
console.log(event.relatedTarget==document.getElementById('box02'));
console.log($('#box02')[0])
console.log(event.relatedTarget==$('#box02')[0])
if(event.relatedTarget==$('#box02')[0])
{
$("#box01").val('');
//return;
}else{ alert(1) } }) </script></body></html>
就是以上代码了,用的是relatedTarget, w3c官网解释,事件属性返回与事件的目标节点相关的节点。意思就是我在失去焦点的时候,用
relatedTarget判断一下失去焦点的时候是不是那个删除按钮触发的,如果是的话就直接清空input输入框,否则就去请求ajax.
另外说一下,其实这个relatedTarget返回的是事件节点集合,所以我们在获取的时候要取它的第一个元素就好了,
console.log(event.relatedTarget.id=='box02');
console.log(event.relatedTarget==document.getElementById('box02'));
console.log(event.relatedTarget==$('#box02')[0]);
以上这三种方法都是可以的; 但是方法二有个缺陷,我们要确保删除按钮是button 或者 input[type="button"]做的,我试过了,如果是其它标签,比如a,span,
event.relatedTarget 是 null,因为其他元素获取不到焦点, 那么即便是因为点击 删除按钮 让 input 失去了焦点, 那也得不到 relatedTarget,
反正2种方法各有利弊,自己权衡使用吧。
以上仅代表个人观点,如有错误还望指正。
最新文章
- zeptojs-跑马灯效果
- DOM 节点的克隆与删除
- 字符串切分 String.Split 和 Regex.Split
- {Latex}{Tabular}文本超出表格自动换行
- Python覆盖率分析工具_Coverage
- Codeforces Round #310 (Div. 2)--A(简单题)
- 委托与Lambda-浅谈
- NOI2011 兔农
- INFORMIX 时间函数大全
- java解析xml文件并输出
- Asp.net中,从弹出窗体取选择值(转)
- 201521123031《Java程序设计》 第2周学习总结
- 删除链表中倒数第n个节点
- 数据加密算法--详解DES加密算法原理与实现
- springBoot总结
- ionic3+angular4的三方微信开发(登录and分享)
- 时钟信号的占空比调整——Verilog
- mysql安装设置mysql字符集utf8及修改密码
- Kafka监控KafkaOffsetMonitor【转】
- java乱码问题解决