资讯专栏INFORMATION COLUMN

点击任意元素,指定元素隐藏,div如何拥有获得焦点事件

klinson / 2046人阅读

摘要:点击任意非本身元素,指定元素隐藏在实际开发过程中经常遇到如下问题鼠标经过下拉框显示隐藏,例如导航下拉鼠标点击下拉框显示,鼠标点击其它任意元素,下拉框隐藏。

点击任意非本身元素,指定元素隐藏

在实际开发过程中经常遇到如下问题:
1.鼠标经过下拉框显示隐藏,例如导航下拉
2.鼠标点击下拉框显示,鼠标点击其它任意元素,下拉框隐藏。
第一种方法非常容易实现,但是第二种方法就非常的头疼了,为此将介绍两种方案解决第二个问题。

一、使用点击绑定法

jQuery代码:

$("span").click(function(){
    $("ul").show();
})

$(document).click(function(){
    $("ul").hide();
})
//div为指定的“触发下拉控件”
//如果“触发下拉控件”和指定的显示隐藏元素不是上下级别关系,也需要对显示隐藏元素阻止冒泡
$("div").click(function(){
    return false;
})

html布局:

弊端:

html文档中有其它元素是阻止冒泡的,那么这种做法是不能完全达到预期效果的。

任意一个元素点击都需要触发div的隐藏,这种做法非常消耗资源。

设想:如果div也能像input文本框那样有焦点属性,这种问题是不是迎刃而解?!

二、如何让div拥有焦点属性

增加tabindex,修改html如下:

jQuery写法如下:

$("div").focus(function(){
    $("ul").show();
}).blur(function(){
    $("ul").hide();
})

优点:

占用资源少

方法实现容易理解

兼容性好

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112427.html

相关文章

  • 点击任意元素指定元素隐藏div如何拥有获得焦点事件

    摘要:点击任意非本身元素,指定元素隐藏在实际开发过程中经常遇到如下问题鼠标经过下拉框显示隐藏,例如导航下拉鼠标点击下拉框显示,鼠标点击其它任意元素,下拉框隐藏。 点击任意非本身元素,指定元素隐藏 在实际开发过程中经常遇到如下问题:1.鼠标经过下拉框显示隐藏,例如导航下拉2.鼠标点击下拉框显示,鼠标点击其它任意元素,下拉框隐藏。第一种方法非常容易实现,但是第二种方法就非常的头疼了,为此将介绍两...

    seal_de 评论0 收藏0
  • 点击任意元素指定元素隐藏div如何拥有获得焦点事件

    摘要:点击任意非本身元素,指定元素隐藏在实际开发过程中经常遇到如下问题鼠标经过下拉框显示隐藏,例如导航下拉鼠标点击下拉框显示,鼠标点击其它任意元素,下拉框隐藏。 点击任意非本身元素,指定元素隐藏 在实际开发过程中经常遇到如下问题:1.鼠标经过下拉框显示隐藏,例如导航下拉2.鼠标点击下拉框显示,鼠标点击其它任意元素,下拉框隐藏。第一种方法非常容易实现,但是第二种方法就非常的头疼了,为此将介绍两...

    lmxdawn 评论0 收藏0
  • 实现"输入框"获得焦点时外边框变蓝

    摘要:背景之前做了一个网页,网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。而且输入框的边框设置在了父元素上,所有当输入框获得焦点时,看到的应该是父元素上的边框变蓝,而不是里面的的边框变蓝。 背景 之前做了一个网页,网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。突然某一天,产品觉得这样用户体验不好,不能很明显地告诉用户当前鼠标停在哪里,于是要求改为当输入框获得鼠标焦点时,外...

    Coding01 评论0 收藏0
  • 实现"输入框"获得焦点时外边框变蓝

    摘要:背景之前做了一个网页,网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。而且输入框的边框设置在了父元素上,所有当输入框获得焦点时,看到的应该是父元素上的边框变蓝,而不是里面的的边框变蓝。 背景 之前做了一个网页,网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。突然某一天,产品觉得这样用户体验不好,不能很明显地告诉用户当前鼠标停在哪里,于是要求改为当输入框获得鼠标焦点时,外...

    e10101 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<