click和blur冲突的问题

昨天在前端群里讨论到一个问题,大家平时做表单验证的时候一般都有个input框和删除按钮,然后习惯性在失去焦点的时候去验证输入的内容是否正确,做验证,发请求等等.这个时候,那个点击删除按钮往往也就触发了input的失去焦点事件,这个该咋解决呢,经过研究有以下2种方法: 1. 给失去焦点的时间加上延迟时间,让blur时间在click事件后执行,这个方法固然能够解决问题,但是本人并不是很推荐,因为影响性能,不到最后不用这个方法: 2. <!doctype html> <html lang=&q…

解决input的回车enter和失焦blur冲突问题：实现回车保存，blur还原编辑内容功能

最近做项目遇到: 背景:点击单元格,easyUI自动生成input可编辑框. 问题点:input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能要实现需求: 1.回车键保存编辑内容 2.input框失去焦点后,不保存编辑内容,还原为原来内容. 如下图所示: 编程中遇到的棘手问题: 按下回车后,保存不了编辑的内容.原因是按下回车,先触发input框的blur事件(此时导致编辑内容被还原,保存不了内容),才触发回车事件. 经过多方尝试,摸索出一下解决办法,终于解决回车…

如何解决 touchstart 事件与 click 事件的冲突

一 · 业务场景的描述在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart 事件代替 click 事件. 为什么这样效果会更好呢?根据Google开发者文档中的描述: 移动设备上的浏览器将会在 click 事件触发时延迟 300ms ,以确保这是一个“单击”事件而非“双击”事件. 而对于 touchstart 事件而言,则会在用户手指触碰屏幕的一瞬间触发所绑定的事件.所以…

click和blur事件冲突解决方案

场景:例如做一个模仿百度搜索的搜索框,输入文字下面会有匹配项,当点击下拉项中的值时,就将值添加到搜索框中同时隐藏下拉框,点击其他地方就直接隐藏下拉框,这时所需要的事件分别为下拉框事件onclick,输入框事件onblur,但是实际会出现想选中下拉框却先触发了onblur事件导致onclick无法执行.原因是因为JS是单线程,同一时间只能处理一个事件,且blur执行顺序优先click. 解决方案:将onclick改为onmousedown即可.…

input元素的blur事件与定位在其上面的元素的点击（click）事件冲突的解决方法

在登录和注册框中,在input上定位一个清空内容的按钮. 但是给按钮的单击事件不生效. 解决的办法: 在blur的回调函数中加一个定时器,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候,input的blur行为先被触发,但是由于加了定时器延迟,所以得等到按钮的click回调执行完成后才能执行input的blur行为的回调: //文本框失去焦点隐藏按钮 input.blur(function(){ setTimeout(function(){ $(this).next(btn).h…

jqurey click和blur执行时间冲突

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

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

一.冲突 hover和blur都是含有两个函数参数的方法,分别表示事件的两种对立状态的相应方法. delegate用于处理事件委托等场景,只能传一个函数参数. 冲突:delegate无法完整传入hover和blur的两个函数参数. 二.解决方法回归hover和blur的本源:用mouseenter和mouseleave替代hover和blur的两种状态就行了. //监听鼠标移入时歌曲行图标的出现 $(".music_list").delegate(".list_music&…

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

想实现日期框easyui-datebox手动输入值,手动输入失去焦点判断输入值是否合法例如<input id="txtDate" type="text" class="easyui-datebox" /> 直接$("#txtDate").blur(){}没有反应.因为加载日期控件dom的时候多了很多其他控件所以定位具体控件的时候有点问题. 经自己测试和大神解答,发现有两种方法,直接上代码(简单测试例,没有写判断…

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

示例代码: marker.addEventListener("click", function(){ if (!window.markerClicked) { window.markerClicked = true; } else { window.markerClicked = false; return; } setTimeout(function () { window.markerClicked = false; }, ); //todo: 下面写业务代码 }); 上面提供一种…

touchstart 事件与 click 事件的冲突

const clickEvent = (function() { if ('ontouchstart' in document.documentElement === true) return 'touchstart'; else return 'click'; })(); Button.addEventListener(clickEvent, e => { console.log("things happened!") })…

focus、click、blur、display、float、border、absolute、relative、fixed

onfocus:获取焦点,点击时,按着不放 onclick:点击松开之后,未点击其他处 onblur:点击松开之后,又点击其他处 display:block,none,inline block:单独占据一行,与前后不在同一行 block:块对象的默认值.对象之后添加新行. none:隐藏对象.隐藏的对象不占据物理空间. inline:内联对象的默认值.对象后不添加行. display:none不占据页面空间 visibility:hidden 占据页面空间 type="hidden"…

下拉框选择blur与click冲突问题

缘由:今天在做下拉框选择时,遇到click和blur冲突问题:具体现象如下 1.intput框获取焦点(focus事件)时显示隐藏的下拉框,失去焦点(blur事件)则隐藏下拉框 2.点击选择(click事件)下拉框内容时获取值,然后intput失去焦点(blur事件)隐藏下拉框 3.发现click事件无效,blur事件会优先于click事件执行,导致click事件无效解决:使用mousedown替换click使点击选择事件优先执行 mousedown事件:当鼠标指针移动到元素上方,并按下鼠标按…

blur和click事件冲突

一.问题描述文本框的blur事件和div元素的click事件出现冲突.在input的blur事件中,我们隐藏div元素.在div的click事件中,我们清除input的内容,并隐藏自身.当我们在input中输入内容后,点击div,希望触发div的click事件,清除input的内容,并隐藏自身.不料先触发了input的blur事件,隐藏了div元素,导致无法完成div的click事件.二.问题分析出现上述问题,让人不得不去探索事件执行顺序.1.在一个input文本框中绑定如下事件,测试执行顺序…

jquery点击click事件和blur事件冲突如何解决

最近做了一个查询小功能,input输入框输入文字后,自动列出几条查询结果,可以键盘上下键或鼠标进行查询结果选择,并且点击输入框其他地方要隐藏这个列出的结果. 但比较头疼的是input上添加blur事件和查询提示结果click事件发生冲突,点击查询结果时,会首先触发input的blur事件,导致将查询提示结果隐藏选择不了, 解决办法: 给blur失去焦点事件添加延迟事件,让blur事件在click事件后执行. $(".query_tools").blur(function(event){…

JavaScript区分click事件和mousedown（mouseup、mousemove）方法

在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouseup事件.但mousedown.mouseup就会和click事件发生冲突.我们希望在拖拽元素的时候不希望它执行click方法,在执行click方法是不希望执行mousedown和mouseup方法. 比如如下代码,就会出现上面的问题: <!DOCTYPE html> <html> &…

jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同

jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿$().click()和$(document).on('click','要选择的元素',function(){})来说,都是点击事件的操作,但是也有不同的地方. 1. $(选择器).click(fn) 当选中的选择器被点击时触发回调函数fn.只针对与页面已存在的选择器. <body> <ul> <li>1</li> <li>2…

$().click()和$(document).on('click','要选择的元素',function(){})的不同

1. $(选择器).click(fn) 当选中的选择器被点击时触发回调函数fn.只针对与页面已存在的选择器; 2.$(document).on('click','要选择的元素',function(){}) on方法包含很多事件,点击,双击等等事件.和$().click()的用法一样,最大的区别即优点是如果动态创建的元素在该选择器选中范围内是能触发回调函数 $().on()的知识点补充: 1.从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind…

$().click()和$(document).on('click','要选择的元素',function(){})的不同（转https://www.cnblogs.com/sqh17/p/7746418.html）

$(document).on();用于动态绑定事件 jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿$().click()和$(document).on('click','要选择的元素',function(){})来说,都是点击事件的操作,但是也有不同的地方. 1. $(选择器).click(fn) 当选中的选择器被点击时触发回调函数fn.只针对与页面已存在的选择器. <body> <ul> <li&g…

jQuery第二篇（帅哥）

1.1 jQuery操作DOM jQuery课程的目标:学会使用jQuery设计常见效果选择器基本选择器:#id ..class .element.* . 层级选择器: 空格.>.+.~ 基本过滤选择器::first.:last.:eq(index).:lt(index).:gt(index).:odd.:even 筛选选择器:.eq(index)..children()..parent()..siblings()..find() 动画:show.hide.fadeIn.fadeOut.fa…

原生js事件和jquery事件的执行顺序问题

场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦点进行一些一些逻辑操作. 思路一:改写插件,使用回调函数或初始化函数. 原来的插件并没有使用回调函数或初始化函数.可以改写插件,增加回调函数或初始化函数,视情况,在原来逻辑执行之前或之后先执行逻辑操作. 思路二:使用原生js事件. 开始的时候并没有这个思路,但是由于原生js事件函数onfocus()…

JQuery入门

JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极大地简化了 JavaScript 编程.学习jQuery需要前期知识:HTML.CSS.JavaScript. jQuery库具有的特性:HTML 元素选取和操作:CSS 操作:HTML 事件函数:JavaScript 特效和动画:HTML DOM 遍历和修改:AJAX:Utilities 一个简单…

【转载】Dom篇

一. 初探Dom 1. Dom介绍二. Dom基础 1. window顶级对象 2. body.document对象事件 3. 通用的HTML元素的事件 4. 冒泡事件 5. this与event.srcElement 三. Dom操作 1. 动态创建Dom 2. innerText.innerHTML 4. Form对象 5. JS中的正则表达式 6. 火狐浏览器(FF)不兼容性: 7. 性能优化…

JavaScript DOM编程基础精华03（动态设置,层的操作,性能问题）

代码是否需要放置到onload中 //如果js代码需要操作页面上的元素,则将该代码放到onload里面. //因为当页面加载完毕之后页面上才会有相关的元素 //如果js代码中没有操作页面元素的语句,则可以将该代码直接写在<script>标签中, //例如:声明变量,相加求和等操作. //建议将操作页面元素的代码都放到onload里面. 控制层的显示修改style.display,例子:切换层的显示 function togg…

一周一话题之四（JavaScript、Dom、jQuery全面复习总结<Dom篇>）

-->目录导航一. 初探Dom 1. Dom介绍二. Dom基础 1. window顶级对象 2. body.document对象事件 3. 通用的HTML元素的事件 4. 冒泡事件 5. this与event.srcElement 三. Dom操作 1. 动态创建Dom 2. innerText.innerHTML 4. Form对象 5. JS中的正则表达式 6. 火狐浏览器(FF)不兼容性: 7. 性能优化四. 实力检测一. 初探Dom JavaScript—>Dom,C#—&g…

ASP.NET MVC5高级编程之 Ajax

jQuery不仅支持所有现代浏览器,包括IE.Firefox.Safari.Opera和Chrome等,还可以在编写代码和浏览器API冲突时隐藏不一致性(和错误). 1. jQuery jQuery擅长在HTML文档中查找.遍历和操纵HTML元素.一旦找到元素,jQuery就可以方便的在其上进行操作,如连接事件处理程序.使其具有动画效果以及围绕它的Ajax交互等. 1.1 jQuery函数 jQuery函数对象可以用来访问jQuery特性. $(function (){ $("#album-li…