昨天在前端群里讨论到一个问题,大家平时做表单验证的时候一般都有个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. 如何解决 touchstart 事件与 click 事件的冲突

    一 · 业务场景的描述 在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart ...

  3. click和blur事件冲突解决方案

    场景:例如做一个模仿百度搜索的搜索框,输入文字下面会有匹配项,当点击下拉项中的值时,就将值添加到搜索框中同时隐藏下拉框,点击其他地方就直接隐藏下拉框,这时所需要的事件分别为 下拉框事件onclick, ...

  4. input元素的blur事件与定位在其上面的元素的点击(click)事件冲突的解决方法

    在登录和注册框中,在input上定位一个清空内容的按钮. 但是给按钮的单击事件不生效. 解决的办法: 在blur的回调函数中加一个定时器,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候 ...

  5. jqurey click和blur执行时间冲突

    参考资料:http://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event

  6. delegate与hover和blur冲突问题及解决方法

    一.冲突 hover和blur都是含有两个函数参数的方法,分别表示事件的两种对立状态的相应方法. delegate用于处理事件委托等场景,只能传一个函数参数. 冲突:delegate无法完整传入hov ...

  7. 关于easyUI的datebox加失去焦点事件即click、blur等

    想实现日期框easyui-datebox手动输入值,手动输入失去焦点判断输入值是否合法 例如<input id="txtDate" type="text" ...

  8. javascript js 完美解决 click 与 dblclick 冲突,并且不会导致click延迟

    示例代码: marker.addEventListener("click", function(){ if (!window.markerClicked) { window.mar ...

  9. touchstart 事件与 click 事件的冲突

    const clickEvent = (function() {   if ('ontouchstart' in document.documentElement === true)     retu ...

随机推荐

  1. Hive presto和hive时间格式转换

    1.北京时间格式   to   unix时间格式 数据格式: 2017-11-17 08:28:13 2017-11-17 08:28:10 2017-11-17 08:27:51.343 2017- ...

  2. 如何根据字典值的大小,对字典中的项排序---Python数据结构与算法相关问题与解决技巧

    实际案例: 某班英语成绩以字典形式存储为: { 'LiLei' : 90, 'Jim' : 88, 'Lucy': 92 } 如何根据成绩高低,计算学生排名 -- 根据分数,进行排名,并且把排名信息添 ...

  3. SQL查询返回去除重复数据的结果集

    方法一: select * from  tablename  where  id   in   (select  id  from  tablename   group  by  id   havin ...

  4. 爬虫(十一)—— XPath总结

    目录 XPath总结 一.何为XPath 二.XPath语法 1.语法 2.实例 三.XPath轴 1.XPath轴语法 2.XPath轴实例 四.XPath运算符 XPath总结 一.何为XPath ...

  5. 洛谷 P1546 最短网络 Agri-Net(最小生成树)

    题目链接 https://www.luogu.org/problemnew/show/P1546 说过了不复制内容了 显然是个最小生成树. 解题思路 prim算法 Kruskal算法 prim算法很直 ...

  6. Tarjan&2-SAT 总结

    \(Tarjan\)&\(2-SAT\) 标签: 知识点总结 安利XZYXZY ps:里面的部分东西来自\(Anson\)和\(yler\)和\(XZY\) 阅读体验:https://zybu ...

  7. HDU 6386 Age of Moyu (最短路+set)

    <题目链接> 题目大意:给定一张无向图,有n个点m条边,从一条边到另一条边,如果两边的指不同 花费就要+1,如果相同就不需要花费. 先从1走到n问最小花费是多少.(第一条边的花费都是1) ...

  8. 怎么区分PV、IV、UV以及网站统计名词解释(pv、曝光、点击)

    PV(Page View)访问量,即页面访问量,每打开一次页面PV计数+1,刷新页面也是. IV(Internet Protocol)访问量指独立IP访问数,计算是以一个独立的IP在一个计算时段内访问 ...

  9. Hibernate4教程二:基本配置(2)

    <hibernate-mapping>元素 这个元素是xxx.hbm.xml配置的根元素,定义如下: java代码: <hibernate-mapping schema=" ...

  10. JSON —— 数据结构

    1.什么是 JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写 JSON 采用完全独立于语言的文本格式,但是也使用了类似于 C ...