昨天在前端群里讨论到一个问题，大家平时做表单验证的时候一般都有个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种方法各有利弊，自己权衡使用吧。
以上仅代表个人观点，如有错误还望指正。




												


											
click和blur冲突的问题的更多相关文章
	

    
								
  1. 解决input的回车enter和失焦blur冲突问题：实现回车保存，blur还原编辑内容功能
		
    最近做项目遇到: 背景:点击单元格,easyUI自动生成input可编辑框. 问题点:input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能 要实现需求: 1.回车键 ...
    
		
    2. 
						
  2. 如何解决 touchstart 事件与 click 事件的冲突
		
    一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...
    
		
    3. 
						
  3. click和blur事件冲突解决方案
		
    场景:例如做一个模仿百度搜索的搜索框,输入文字下面会有匹配项,当点击下拉项中的值时,就将值添加到搜索框中同时隐藏下拉框,点击其他地方就直接隐藏下拉框,这时所需要的事件分别为 下拉框事件onclick, ...
    
		
    4. 
						
  4. input元素的blur事件与定位在其上面的元素的点击（click）事件冲突的解决方法
		
    在登录和注册框中,在input上定位一个清空内容的按钮. 但是给按钮的单击事件不生效. 解决的办法: 在blur的回调函数中加一个定时器,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候 ...
    
		
    5. 
						
  5. jqurey click和blur执行时间冲突
		
    参考资料:http://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event
    
		
    6. 
						
  6. delegate与hover和blur冲突问题及解决方法
		
    一.冲突 hover和blur都是含有两个函数参数的方法,分别表示事件的两种对立状态的相应方法. delegate用于处理事件委托等场景,只能传一个函数参数. 冲突:delegate无法完整传入hov ...
    
		
    7. 
						
  7. 关于easyUI的datebox加失去焦点事件即click、blur等
		
    想实现日期框easyui-datebox手动输入值,手动输入失去焦点判断输入值是否合法 例如<input id="txtDate" type="text" ...
    
		
    8. 
						
  8. javascript js 完美解决 click 与 dblclick 冲突，并且不会导致click延迟
		
    示例代码: marker.addEventListener("click", function(){ if (!window.markerClicked) { window.mar ...
    
		
    9. 
						
  9. touchstart 事件与 click 事件的冲突
		
    const clickEvent = (function() {   if ('ontouchstart' in document.documentElement === true)     retu ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ruby的next if boolean
			
    next相当于continue
    
			
    2. 
						
  2. 多个springboot项目部署到tomcat，Error deploying web application archive
			
    每个springboot单独部署到tomcat下可以正常启动,多个一个就发生异常 Error deploying web application archive 解决:配置文件加上配置区分 sprin ...
    
			
    3. 
						
  3. SqL语句基础之增删改查
			
    增查删改的SQL语句,如此的实用,下面我就来简单介绍一下它简单的用法. 1.什么是SQL? SQL是用于访问和处理数据库的标准的一种计算机语言. 2.SQL可以做什么?  (1)可以向数据库进行查询  ...
    
			
    4. 
						
  4. 怎样用idhttpserver代替IIS让用户浏览html或下载文件   http://bbs.csdn.net/topics/360248674
			
      怎样用idhttpserver代替IIS让用户浏览html或下载文件 更多0分享到: 相关知识库: C# 虚拟现实(VR) Node.js 算法与数据结构     对我有用[0] 丢个板砖[0]  ...
    
			
    5. 
						
  5. postman的下载和使用
			
    postman的下载 官网:https://www.getpostman.com/downloads/ 创建账号或者用谷歌浏览器账号登录 登录之后,进行接口测试,这里请求百度为例,然后点击send,就 ...
    
			
    6. 
						
  6. MyBatis-Spring的sqlSessionTemplate
			
    转自:http://www.cnblogs.com/yhtboke/p/5611375.html SqlSessionTemplate SqlSessionTemplate是MyBatis-Sprin ...
    
			
    7. 
						
  7. forEach究竟能不能改变数组的值
			
    forEach究竟能不能改变数组的值 :https://blog.csdn.net/ZhengKehang/article/details/81281563 初学者每次提到Array对象的时候有些烦人 ...
    
			
    8. 
						
  8. java_第一年_JavaWeb（9）
			
    JavaBean是一个遵循某种特定写法的Java类,有以下特点: 必需具有一个无参的构造函数 属性必需私有化 私有化的属性必需通过public类型的方法暴露给其它程序,其方法命名也有一定的规范 范例: ...
    
			
    9. 
						
  9. Codeforces 1156E Special Segments of Permutation（单调栈）
			
    可以用单调栈直接维护出ai所能覆盖到的最大的左右范围是什么,然后我们可以用这个范围暴力的去查询这个区间的是否有满足的点对,一个小坑点,要对左右区间的大小进行判断,只需要去枚举距离i最近的一段区间去枚举 ...
    
			
    10. 
						
  10. jar包/class文件如何快速反编译成java文件
			
    有时编写的java代码打包为可执行jar包后需要查看工程结构是否是且只有我们需要的包,故需要查看jar包层级. 1.windows系统可以直接在网上下载jd-gui.exe包,然后傻瓜安装: 2.Ma ...
    
			
    11.