成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

seal_de / 3555人閱讀

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

點擊任意非本身元素，指定元素隱藏

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

一、使用點擊綁定法

jQuery代碼：

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

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

html布局：

弊端：

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

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

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

二、如何讓div擁有焦點屬性

增加tabindex，修改html如下：

jQuery寫法如下：

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

優(yōu)點：

占用資源少

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

兼容性好

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

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

相關(guān)文章

  • 點擊任意元素，指定元素隱藏，div如何擁有獲得焦點事件

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

    lmxdawn 評論0 收藏0

  • 點擊任意元素，指定元素隱藏，div如何擁有獲得焦點事件

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

    klinson 評論0 收藏0

  • JavaScript學(xué)習(xí)總結(jié)（九）事件詳解

    摘要：布爾值表示捕獲階段調(diào)用事件處理程序，表示冒泡階段通過對象的方法，也可以定義事件的回調(diào)函數(shù)。對象會被作為第一個參數(shù)傳遞給事件監(jiān)聽的回調(diào)函數(shù)。布爾默認(rèn)值是，當(dāng)設(shè)置成時用以取消事件的默認(rèn)行為與中的相同。 其實這篇文章挺早之前就寫了，但是由于sf保存方面的bug，所以當(dāng)時寫了一大堆，結(jié)果沒保存，覺得這個沒寫完是個不小的遺憾，今天正好有空，就給補充下了，也正好給我的javascript學(xué)習(xí)總結(jié)做...

    LiveVideoStack 評論0 收藏0

  • JavaScript 編程精解 中文第三版 十五、處理事件

    摘要：事件與節(jié)點每個瀏覽器事件處理器被注冊在上下文中。事件對象雖然目前為止我們忽略了它，事件處理器函數(shù)作為對象傳遞事件對象。若事件處理器不希望執(zhí)行默認(rèn)行為通常是因為已經(jīng)處理了該事件，會調(diào)用事件對象的方法。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項目原文：Handling Events 譯者：飛龍 協(xié)議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分...

    Clect 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<