點(diǎn)擊任意元素，指定元素隱藏，div如何擁有獲得焦點(diǎn)事件

seal_de 發(fā)布于2019-08-22 10:54 / 3515人閱讀

摘要：點(diǎn)擊任意非本身元素，指定元素隱藏在實(shí)際開發(fā)過程中經(jīng)常遇到如下問題鼠標(biāo)經(jīng)過下拉框顯示隱藏，例如導(dǎo)航下拉鼠標(biāo)點(diǎn)擊下拉框顯示，鼠標(biāo)點(diǎn)擊其它任意元素，下拉框隱藏。

點(diǎn)擊任意非本身元素，指定元素隱藏

在實(shí)際開發(fā)過程中經(jīng)常遇到如下問題：
1.鼠標(biāo)經(jīng)過下拉框顯示隱藏，例如導(dǎo)航下拉
2.鼠標(biāo)點(diǎn)擊下拉框顯示，鼠標(biāo)點(diǎn)擊其它任意元素，下拉框隱藏。
第一種方法非常容易實(shí)現(xiàn)，但是第二種方法就非常的頭疼了，為此將介紹兩種方案解決第二個(gè)問題。

一、使用點(diǎn)擊綁定法

jQuery代碼：

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

$(document).click(function(){
    $("ul").hide();
})
//div為指定的“觸發(fā)下拉控件”
//如果“觸發(fā)下拉控件”和指定的顯示隱藏元素不是上下級(jí)別關(guān)系，也需要對(duì)顯示隱藏元素阻止冒泡
$("div").click(function(){
    return false;
})

html布局：

弊端：

html文檔中有其它元素是阻止冒泡的，那么這種做法是不能完全達(dá)到預(yù)期效果的。

任意一個(gè)元素點(diǎn)擊都需要觸發(fā)div的隱藏，這種做法非常消耗資源。

設(shè)想：如果div也能像input文本框那樣有焦點(diǎn)屬性，這種問題是不是迎刃而解?!

二、如何讓div擁有焦點(diǎn)屬性

增加tabindex，修改html如下：

jQuery寫法如下：

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

優(yōu)點(diǎn)：

占用資源少

方法實(shí)現(xiàn)容易理解

兼容性好

云服務(wù)器 GPU云服務(wù)器 js點(diǎn)擊元素隱藏任意元素和隱藏元素點(diǎn)擊隱藏div

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/91429.html

相關(guān)文章

點(diǎn)擊任意元素，指定元素隱藏，div如何擁有獲得焦點(diǎn)事件

摘要：點(diǎn)擊任意非本身元素，指定元素隱藏在實(shí)際開發(fā)過程中經(jīng)常遇到如下問題鼠標(biāo)經(jīng)過下拉框顯示隱藏，例如導(dǎo)航下拉鼠標(biāo)點(diǎn)擊下拉框顯示，鼠標(biāo)點(diǎn)擊其它任意元素，下拉框隱藏。點(diǎn)擊任意非本身元素，指定元素隱藏在實(shí)際開發(fā)過程中經(jīng)常遇到如下問題：1.鼠標(biāo)經(jīng)過下拉框顯示隱藏，例如導(dǎo)航下拉2.鼠標(biāo)點(diǎn)擊下拉框顯示，鼠標(biāo)點(diǎn)擊其它任意元素，下拉框隱藏。第一種方法非常容易實(shí)現(xiàn)，但是第二種方法就非常的頭疼了，為此將介紹兩...

lmxdawn 2019-08-01 17:26 評(píng)論0 收藏0
點(diǎn)擊任意元素，指定元素隱藏，div如何擁有獲得焦點(diǎn)事件

摘要：點(diǎn)擊任意非本身元素，指定元素隱藏在實(shí)際開發(fā)過程中經(jīng)常遇到如下問題鼠標(biāo)經(jīng)過下拉框顯示隱藏，例如導(dǎo)航下拉鼠標(biāo)點(diǎn)擊下拉框顯示，鼠標(biāo)點(diǎn)擊其它任意元素，下拉框隱藏。點(diǎn)擊任意非本身元素，指定元素隱藏在實(shí)際開發(fā)過程中經(jīng)常遇到如下問題：1.鼠標(biāo)經(jīng)過下拉框顯示隱藏，例如導(dǎo)航下拉2.鼠標(biāo)點(diǎn)擊下拉框顯示，鼠標(biāo)點(diǎn)擊其它任意元素，下拉框隱藏。第一種方法非常容易實(shí)現(xiàn)，但是第二種方法就非常的頭疼了，為此將介紹兩...

klinson 2019-08-29 13:11 評(píng)論0 收藏0
實(shí)現(xiàn)"輸入框"獲得焦點(diǎn)時(shí)外邊框變藍(lán)

摘要：背景之前做了一個(gè)網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)。而且輸入框的邊框設(shè)置在了父元素上，所有當(dāng)輸入框獲得焦點(diǎn)時(shí)，看到的應(yīng)該是父元素上的邊框變藍(lán)，而不是里面的的邊框變藍(lán)。背景之前做了一個(gè)網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)。突然某一天，產(chǎn)品覺得這樣用戶體驗(yàn)不好，不能很明顯地告訴用戶當(dāng)前鼠標(biāo)停在哪里，于是要求改為當(dāng)輸入框獲得鼠標(biāo)焦點(diǎn)時(shí)，外...

Coding01 2019-08-21 10:44 評(píng)論0 收藏0
實(shí)現(xiàn)"輸入框"獲得焦點(diǎn)時(shí)外邊框變藍(lán)

摘要：背景之前做了一個(gè)網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)。而且輸入框的邊框設(shè)置在了父元素上，所有當(dāng)輸入框獲得焦點(diǎn)時(shí)，看到的應(yīng)該是父元素上的邊框變藍(lán)，而不是里面的的邊框變藍(lán)。背景之前做了一個(gè)網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)。突然某一天，產(chǎn)品覺得這樣用戶體驗(yàn)不好，不能很明顯地告訴用戶當(dāng)前鼠標(biāo)停在哪里，于是要求改為當(dāng)輸入框獲得鼠標(biāo)焦點(diǎn)時(shí)，外...

e10101 2019-08-28 18:21 評(píng)論0 收藏0