qq_19755427
残缺丶
采纳率56%
2015-04-21 02:26 阅读 2.4k
已采纳

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    showbo GoCityPass新加坡曼谷通票 2015-04-21 02:40

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

    点赞 1 评论 复制链接分享
  • brave2002honest 清水依恋成 2015-04-21 02:38

    li-click事件发生,input-onblur事件发生,你是没搞清谁先谁后的问题,常规想法是a,b两个控件标签,点击a,b没焦点了,总以为是点击a造成的b没焦点了。
    浏览器里的事件是存在冒泡和广播了,冒泡好理解,广播又是啥呢,这个时候你琢磨琢磨鼠标从a转移到b后,点下去又是啥,你点下去了,鼠标压住不松开,你以为是触发了click事件吗,顶多是一个按下的事件。
    但我想要告诉你的并不是这个“按下”的事件,鼠标接收到你的按下动作,浏览器先知道你按下鼠标了,浏览器怎么才知道你到底是按a,还是按b,还是别的,冒泡作用是对重叠点阵区间内的控件有效,如果压根a和b一个上边一个下边都不搭边的想冒泡去哪儿冒呀。
    这个时候浏览器里的面板(你就先当成html里的body标签理解吧),它先接收到你按下了,但是发下鼠标点击的区间不在是a了,而是b,这个时候你应该能猜到面板会怎么处理原来a状态了吧,是a失去焦点在先,还是b接受点击事件在先。

    还需要告诉你的是:刚才是让你“你就先当成html里的body标签理解吧”,就是说你想通过javascript验证这个问题,建议你还是算了,因为html上的标签都是在浏览器app面板上渲染出来了,渲染规则和顺序和浏览器程序提供商思路有关。

    点赞 评论 复制链接分享
  • bulusli3 lhl_lqc 2015-04-21 02:44

    需要处理事件冒泡,可以使用这个方法阻止事件冒泡,你调用click或者onblur方法后,再调用这个。stop(arguments[0])就能够阻止事件冒泡。

    function stopPP(e) {

    var evt = e || window.event;
    
    //IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法
    
    evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble = true);
    

    }

    点赞 评论 复制链接分享

相关推荐