残缺丶 2015-04-21 02:26 采纳率: 56%
浏览 2461
已采纳

类似百度下拉搜索的功能,li的click事件和input的onblur事件有冲突

这是一个类似百度下拉搜索的功能。当我点击下拉关键字中的一项时， 隐藏下拉单，并将所选关键字填入input中，这个并不难实现，但矛盾的地方在哪里呢，我还想让input 失去焦点的时候隐藏下拉单，这时候就出现一个问题，li 的click 事件发生时又发生了input onblur事件, 结果就是下拉单被隐藏了,但选择的项没有填进input 中。input onblur 事件似乎取代了li click 事件.. 请问该如何处理这个问题?

  • 写回答

3条回答 默认 最新

  • 斯洛文尼亚旅游 2015-04-21 02:40
    关注

    input的onblur事件setTimeout延时执行一下

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • 解决blur与click冲突
    2016-06-26 22:09
    奋飛的博客 在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题，并提供了两种解决方案。一、blur和click事件简述 blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus...
  • js 下拉菜单点击旁边收起实现(踩坑记)
    2020-10-16 07:09
    下拉列表中的每个`li`元素都有一个`@click`事件，用于执行搜索。 问题在于，当用户点击下拉列表中的联想词时，实际上会先触发`li`元素的`@click`事件，然后由于失去焦点，`@blur`事件被触发，导致下拉列表立即关闭...
  • js事件 绑定事件
    2022-02-21 09:46
    嗯光的博客 当对文档中的元素进行操作的时候或者文档的状态发生改变的时候就会产生一个事件 通过id获取元素 返回的是单个对象 document.getElementById(); 通过类名获取元素 返回的是数组对象 class=‘cur’ document....
  • JavaScript 之 DOM(Web API、DOM、事件高级（事件冒泡、事件委托）)
    2019-11-06 17:25
    Andrelia20171760的博客 一、Web API简介 目标： 能够说出 Web APIs 阶段...1. Web APIs和JS基础关联性 1.1 js的组成： 2. API和Web API 2.1 API API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是...
  • js做一个带模糊搜索、自动补全的select组件auto-input-select
    2024-09-01 16:08
    学习使我快乐——玉祥的博客 js做一个带模糊搜索、自动补全的select组件auto-input-select
  • Vue原生下拉组件封装+虚拟滚动功能
    2022-01-26 17:01
    大西瓜-dxg的博客 大致就是这样的功能和思路。 这里用的是jsx写的一个简单下拉框组件，有需要可以直接拷到项目去。主要处理上万条数据加载的下拉框浏览器卡死的问题。 思路 这里直接上代码吧。主要还是在页面正常引入。 第一步： <...
  • JavaScript 各种事件、方法、参数详解示例及常见问题等（全）
    2018-01-08 15:21
    RoadStillFaraway的博客 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件 点击时文字消失，失去焦点时文字再出现 2.网页按钮的特殊...
  • JavaScript之事件
    2025-07-09 23:56
    xrkhy的博客 事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件。eg: 鼠标经过显示下拉菜单...
  • javaWeb技术第二篇之CSS、事件和案例
    2019-08-11 17:31
    不一样的花朵的博客 <!--内联式 CSS （层叠样式表） 编辑 层叠样式表(英文全称：Cascading Style Sheets) ...html里面的外观命名跟css外观命名会有所有不同。但效果一致 css属性: 属性1：值1;属性2：值2;属性3：值3;... 内联式:...
  • JavaScript事件
    2020-12-27 18:36
    TLQHT的博客 JavaScript事件JavaScript事件JavaScript单击事件与元素标签操作JavaScript中的Timing定时事件JavaScript实现简单计算器实例JavaScript简单操作元素标签实例Js事件处理值事件绑定方式JS事件处理值获取时间源对象JS...
  • JavaScript 事件处理
    2021-12-26 10:45
    X～～X~~的博客 事件处理 事件 发生在HTML元素上的事情，可以是用户行为，也可以是浏览器的行为 用户点击了某个HTML元素 用户将鼠标移动到某个HTML元素上 用户输入数据时光标离开 页面加载完成 事件源：时间触发的源头，即触发...
  • JS详解 | 对象 事件 节点 | 系统性学习 | 无知的我费曼笔记
    2022-12-17 15:47
    无知的人_的博客 无知的我正在复盘js&hellip; 文章目录 JavaScript 1 常用命令 输出语句 转换为字符串 得到变量类型 1 获取元素对象 1.1 H5新增获取元素对象 1.2 直接获取特殊元素对象 2 事件三要素 ...7.4.1 属性和方法详细
  • JavaScript——7：事件及事件处理
    2021-05-01 21:10
    dangfulin的博客 当浏览器探测到在某个事件目标上触发了某种事件类型中的某个事件时，它可以执行绑定到该事件的事件处理程序，从而实现灵活的交互性。 （一）事件处理模型 在浏览器的不同发展阶段与不同的平台中，存在几种不同的...
  • 【JavaScript】事件相关知识详解
    2023-01-19 13:32
    编程佳油站的博客 事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动等。我们可以为事件来绑定回调函数来响应事件。绑定事件的方式：可以在标签的事件属性中设置相应的JS代码。 可以通过为对象的指定事件...
  • JavaWEB笔记10 Javascript中的事件
    2021-08-05 00:35
    RainOnTheMoon的博客 JavaWEB笔记10 Javascript中的事件 文章目录JavaWEB笔记10 Javascript中的事件一.表单验证：二.事件类型及演示：1....回顾在笔记09中对事件的基本介绍有：事件的基本类型，事件的绑定和解绑等，结合上节笔
  • JavaScript—DOM事件及案例思路总结
    2021-12-29 17:42
    R-系度的博客 电脑执行有很强的逻辑性，要想把我们所需的效果通过代码表达出来，还需要清楚整个事件的具体过程。 代码已经敲的很多了，但是具体敲代码的逻辑思想才是解题的关键。本文记录了几个案例的编程思想，可以跟随思路在...
  • 第十六节：JavaScript 事件（一）
    2021-04-06 10:03
    孤安先生的博客 第五节：JavaScript 事件 概述: ** 在实际开发中, JavaScript代码是通过用户的某些特定行为(例如: 单击, 双击, 按键等)**来触发的, 用户的行为就叫做: 事件。 事件三要素： 事件源（谁）：触发事件的元素 事件...
  • js事件笔记
    2022-03-15 22:09
    m0_62460586的博客 js事件 1、事件三要素： 事件源：要触发的对象 （一般是名词，事件发起者，比如开关按钮） 事件：怎么触发这个事情 （一般是动词，触发事件，比如点击开关） 事件处理程序:发生了什么事情 （处理结果，比如灯亮了） ...
  • 没有解决我的问题, 去提问