<strike id="gscmg"></strike>

<del id="gscmg"></del>

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

klinson 發(fā)布于2019-08-29 13:11 / 2091人閱讀

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

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

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

一、使用點(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)屬性，這種問(wèn)題是不是迎刃而解?!

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

增加tabindex，修改html如下：

jQuery寫(xiě)法如下：

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

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

占用資源少

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

兼容性好

GPU云服務(wù)器云服務(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/112427.html

相關(guān)文章

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

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

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

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

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

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

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