focus blur冲突

input中blur失去焦点事件与点击事件冲突时如何解决

方法一使用setTimeout $(function(){ $(".cy-name-input input").on({ focus:function() { $(".cy-close").css('display','block'); }, blur:function() { setTimeout(function(){ $(".cy-close").css('display','none'); },0) } }) $(".cy-c

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

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

jQuery - focusin/focusout/focus/blur事件的区别与不同

focus与blur事件:不支持冒泡 focusin与focusout:支持冒泡事件触发顺序: 对于同时支持这4个事件的浏览器,事件执行顺序为focusin(聚焦) > focus > focusout(失焦) > blur HTML代码: <div class="parent"> <input type="text" /> </div> <div class="log"><

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

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

click和blur冲突的问题

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

div,span等标签支持focus/blur事件

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

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

说说focus /focusin /focusout /blur 事件

事件触发时间 focus:当focusable元素获得焦点时,不支持冒泡:focusin:和focus一样,只是此事件支持冒泡:blur:当focusable元素失去焦点时,不支持冒泡:focusout:和blur一样,只是此事件支持冒泡: 以前一直以为所有事件都是支持冒泡的,都是可以cancel的,查阅了[MDN上相关资料](https://developer.mozilla.org/en-US/docs/Web/Events)后,才发现有些事件支持冒泡,有些事件并不支持冒泡:有些事件有默认行

jquery失去焦点与获取焦点事件blur() focus()

以前我们在js中写input各种事件时都会直接在input中写,昨天开始我开始全面使用jquery了,现在来谈一下我对jquery blur() focus()事件的学习笔记. 对于元素的焦点事件,我们可以使用jQuery的焦点函数focus(),blur(). focus():得到焦点时使用,和javascript中的onfocus使用方法相同. 如: 代码如下复制代码 $("p").focus(); 或$("p").focus(fn) blur():失去焦点

focus /focusin /focusout /blur 事件

事件触发时间 focus:当focusable元素获得焦点时,不支持冒泡:focusin:和focus一样,只是此事件支持冒泡:blur:当focusable元素失去焦点时,不支持冒泡:focusout:和blur一样,只是此事件支持冒泡: 以前一直以为所有事件都是支持冒泡的,都是可以cancel的,查阅了[MDN上相关资料](https://developer.mozilla.org/en-US/docs/Web/Events)后,才发现有些事件支持冒泡,有些事件并不支持冒泡:有些事件有默认行

Ztree插件，定位节点时（focus）不能进入可视区域BUG解决方案

相关插件版本: jquery.ztree.exedit-3.4.js jquery.ztree.all-3.4.js jquery-1.8.0.js function onAsyncSuccess(event, treeId, treeNode, msg) { curAsyncCount--; if (curStatus == "expand") { expandNodes(treeNode.children); } else if (curStatus == "async&

Accessibility应用之focus篇

最近项目中需要应用accessibility,大量使用了focus和blur,总结如下一.设置焦点focus 如创建无障碍对话框:当一个对话框出现时,焦点应在对话框内,这样用户才可以使用键盘继续浏览.焦点设置在对话框内的确切位置,在很大程度上取决于对话框本身的目的.如果确认对话框(confirmation dialog )内有一个“继续”按钮和一个“取消”按钮,那么你可以将焦点默认设置在“取消”按钮上.如果对话框是用来让用户输入文字的,那么你可以将焦点默认设置在文本输入框内.如果你实在不知道将

阿里前端框架Alice是个不错的选择

BootStrap虽然用户群体广大,其整体风格尽管有不少skin可选,但以国情来看还是不好看. 阿里开源的前端框架,个人觉得还是很不错,Alice处处透着支付宝中界面风格的气息,电商感挺强. 以下内容摘自:http://aliceui.org/docs/rule.html Alice 的样式模块组织方式追求扁平化的方式,分为三个层级: 基础框架(reset + iconfont + 栅格) 通用模块(符合 Alice 规范的样式模块) 页面样式(继承通用模块) 什么是模块化的样式 Alice 对

BACKBONE源代码解析

//2014.11// Backbone.js 1.0.0 // (c) 2010-2013 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely distributed under the MIT license. // For all details and documentation: // http://backbonejs.org (function() { // Initial Setup // ---------

JQuery知识快览之二—事件

事件是脚本语言的核心.本文将为大家介绍JQuery支持的一些事件和如何自定义事件 JQuery内置事件 1.Document加载事件 JQuery提供了ready,load,unload三个Document加载事件.load和unload事件从1.8版开始就不赞成使用了,ready可以说是我们用得最多的一个事件.这是一个最特别的事件,所有的JQuery语句的执行都始于ready事件.一般都在这个事件的响应函数里绑定其他的响应函数,执行代码等. 相对于JavaScript的load事件来说,rea

jQuery1.9.1源码分析--Events模块

var rformElems = /^(?:input|select|textarea)$/i, rkeyEvent = /^key/, rmouseEvent = /^(?:mouse|contextmenu)|click/, rfocusMorph = /^(?:focusinfocus|focusoutblur)$/, rtypenamespace = /^([^.]*)(?:\.(.+)|)$/; function returnTrue() { return true; } functi

深入理解jQuery的Event机制

jQuery的Event模块非常强大.其功能远远比原生事件监听器强大许多,对同一个元素的监听只用一个eventListener,内部则是一个强大的观察者,根据匹配事件类型触发相应回调.jQuery不仅封装了兼容性差异,还提供了命名空间式注册注销事件,灵活的事件委托(事件代理),手动触发事件trigger以及自定义事件.因为jQuery提供的bind,delegate,live(1.9版本废除了)的功能都是通过on来适配的,所以这里只讲on,off,trigger. 1.注册事件$.fn.on方法

extjs笔记

1. ExtJs 结构树.. 2 2. 对ExtJs的态度.. 3 3. Ext.form概述.. 4 4. Ext.TabPanel篇.. 5 5. Function扩展篇.. 7 6. Ext.data.Store篇.. 10 7. Ext.data.JsonReader篇一.. 12 8. Ext.data.JsonReader篇二.. 15 9. Ext.data.HttpProxy篇.. 19 10. Ext.data.

浅析console和浏览器命令行API

一.console对象: F12或者Control+Shift+i(Win)/ Alt+Command+i(Mac)打开浏览器自带的开发工具,选择顶部tab中的最后一项console,这样你就可以尽情的console了. 下面看看这个console对象给我们提供的各种方法. 1.log().info().debug() console.info()和console.debug()都是console.log方法的别名,用法基本一样.console.info方法会在输出信息的前面,加上一个蓝色图标.

【转载】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

focus blur冲突

热门专题