如何模糊div元素？

我有一個DIV內的下拉菜單。如何模糊div元素？

我希望在用戶點擊其他任何地方時隱藏下拉菜單。

$('div').blur(function() { $(this).hide(); }

不起作用。

我知道.blur只適用於<a>但在這種情況下，最簡單的解決方案是什麼？

來源

2009-08-11 Aamir Afridi

看來你需要在身體處理onclick事件和檢查它是否在div上單擊。如果沒有 - 隱藏這個div。 – 2009-08-11 11:50:27

我認爲問題是，divs不會觸發onfocusout事件。您需要捕獲正文上的點擊事件，然後確定目標是否爲菜單格。如果不是，那麼用戶點擊其他地方，div需要隱藏。

<head> 
    <script> 
    $(document).ready(function(){ 
    $("body").click(function(e) { 
     if(e.target.id !== 'menu'){ 
     $("#menu").hide(); 
     }  
    }); 
    }); 
    </script> 
    <style>#menu { display: none; }</style> 
</head> 

<body> 
    <div id="menu_button" onclick="$('#menu').show();">Menu....</div> 
    <div id="menu"> <!-- Menu options here --> </div> 

    <p>Other stuff</p> 
</body>

來源

2009-08-11 11:24:57

我不認爲這回答了這個問題。我的理解是，除非您單擊select元素，否則當您單擊內部時，aamir會隱藏div。 – ScottE 2009-08-11 11:36:57

這是錯誤的。當用戶點擊不屬於菜單的另一個div時會發生什麼？ – rahul 2009-08-11 11:40:53

+17

如果您爲其指定tabindex，則div可以接受焦點併發布onfocus和onblur。試試這個： '

Blah

' – vit 2009-08-11 11:53:32

-3

.click將在div標籤內正常工作。只要確保你沒有超過select元素的頂部。

$('div').click(function(e) { 
    var $target = $(e.target); 
    if (!$target.is("select")) { $(this).hide() }; 
});

來源

2009-08-11 11:24:04 ScottE

div如何成爲精選？ – redsquare 2009-08-11 11:26:41

是的，應該測試過，需要看目標... – ScottE 2009-08-11 11:33:13

$("body").click(function (evt) { 
    var target = evt.target; 
    if(target.id !== 'menuContainer'){ 
      $(".menu").hide(); 
    }     
});

給DIV一個ID，比如「MenuContainer中」。那麼你可以通過target.id而不是target.tagName來檢查它的特定div。

來源

2009-08-20 13:32:46 PulledBull

嘗試使用您的div的tabindex屬性，請參閱：

檢查this後獲取更多信息和演示。

來源

2011-07-28 13:40:39 comenk

這似乎不適用於iOS Safari。 – Rell 2014-09-27 17:21:45

爲此工作div需要首先集中注意力，因此在點擊之前確保它集中注意力外部div看到的影響 – Bren 2014-11-25 12:55:39

OMG ... GENIUS !!非常感謝...在這裏我試圖找到一種方法來使自定義事件處理程序... :) – carinlynchin 2016-04-18 17:48:56

不是最簡潔的方式，但不是捕獲頁面上的每個點擊事件，而是可以爲您的div添加一個空鏈接，並將其用作div的「焦點代理」。

所以您的標記將改爲：

<div><a id="focus_proxy" href="#"></a></div>

和JavaScript代碼應該勾模糊事件鏈接：

$('div > #focus_proxy').blur(function() { $('div').hide() })

不要忘記將焦點設置鏈接當你顯示的div：

$('div > #focus_proxy').focus()

來源

2012-05-17 10:39:59 guyk

我剛剛遇到這個問題。我想以上都不能正確解決問題，所以我在這裏發佈我的答案。這是一些上述答案的組合：至少它修復了一個可能被碰到2個問題只是檢查，如果點擊的點是一樣的「ID」

$("body").click(function(e) { 
    var x = e.target; 

    //check if the clicked point is the trigger 
    if($(x).attr("class") == "floatLink"){ 
     $(".menu").show(); 
    } 
    //check if the clicked point is the children of the div you want to show 
    else if($(x).closest(".menu").length <= 0){ 
     $(".menu").hide(); 
    } 
});

來源

2012-05-31 12:19:26 user1345344

如何模糊div元素？

回答

相關問題