jQuery單擊元素事件

我有一個浮動div顯示，並且我希望它在用戶單擊div時隱藏。這與懸停元素時的.hover（）函數回調相似。只有我想這樣做點擊。jQuery單擊元素事件

我試着設置一個點擊事件的身體，這將隱藏分區，但這給了意想不到的結果。

任何人都有想法，我怎麼可以輕鬆地做到這一點？

來源

2009-09-14 Nic Hubbard

請詳細說明「那給了意想不到的結果」。 – 2009-09-14 20:17:36

另一個，可能更簡單，選項將浮動DIV和頁面的其餘部分之間添加一個透明的div。

透明DIV上的一個簡單的單擊事件可以處理隱藏，並且可以避免遇到單擊事件時遇到的問題。

來源

2009-09-14 20:40:00 PhillFox

好主意。在過去的情況下，我做過類似的事情。感謝您將此引起我的注意。 – 2009-09-14 20:43:23

歡迎您，並感謝您接受答案。我幾乎沒有發佈信息，因爲我不知道你在設計什麼，並認爲這種方案可能行不通 - 但有時候，外部人的觀點是解決問題的最好方法。祝你好運！ – PhillFox 2009-09-14 22:38:26

這比DavidB的答案簡單嗎？ – JPot 2009-09-15 02:22:37

如果你想清楚，當你點擊其他地方在頁面中的div，你可以這樣做：

$('body').click(function(event) { 
    if (!$(event.target).closest('#myDiv').length) { 
     $('#myDiv').hide(); 
    }; 
});

來源

2009-09-14 20:25:47

真棒，謝謝 – HappyDeveloper 2011-04-12 19:58:36

這是唯一一個適合我的情況。謝謝！ – Jurgen 2011-09-20 07:44:44

什麼是'.length'？ – pruett 2012-02-22 19:04:28

-2

你將需要監控的mouseDown事件整個頁面，但當用戶點擊浮動div時，你必須注意。

我建議增加懸停事件到您的浮動DIV因此當用戶盤旋在它，mouseDown忽略不計，但是當它不被上空盤旋mouseDown將關閉它

來源

2009-09-14 20:27:28 idrumgood

當然，您正在尋找blur活動？

來源

2009-09-14 20:43:19 annakata

*嘆*任何人都想解釋downvote？（或所有這些downvotes？） – annakata 2009-09-17 16:35:26

「模糊」事件只適用於表單元素，提問者可能正在尋找類似於非表單元素的東西。 – 2009-10-20 13:44:44

好吧，這是不正確的* - http://www.quirksmode.org/dom/events/blurfocus.html – annakata 2009-10-20 18:33:31

這裏有一個完整的事件驅動方式

自定義事件處理的「召喚」，該層的「駁回」，以不會在其他基於點擊的事件
文件的腳趾步驟。體聽取了解僱事件僅當有問題的層實際上是可見

Zee的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 

$(function() 
{ 
    var $layer = $('#layer'); 
    var $body = $('html'); 

    $layer 
    .bind('summon', function(e) 
    { 
     $layer.show(); 
     $body.bind('click', dismissLayer); 
    }) 
    .bind('dismiss', function(e) 
    { 
     $layer.hide(); 
     $body.unbind('click', dismissLayer); 
    }) 
    .click(function(e) 
    { 
     e.stopPropagation(); 
    }) 
    .trigger('dismiss') 
    ; 

    function dismissLayer(e) 
    { 
    $layer.trigger('dismiss'); 
    } 

    // This is optional - this just triggers the div to 'visible' 
    $('#control').click(function(e) 
    { 
    var $layer = $('#layer:hidden'); 
    if ($layer.length) 
    { 
     $layer.trigger('summon'); 
     e.stopPropagation(); 
    } 
    }); 
}); 

</script> 

<style type="text/css"> 
#layer { 
    position: absolute; 
    left: 100px; 
    top: 20px; 
    background-color: red; 
    padding: 10px; 
    color: white; 
} 
#control { 
    cursor: pointer; 
} 
</style> 

</head> 
<body> 

<div id="layer">test</div> 
<span id="control">Show div</span> 

</body> 
</html>

這是我知道的很多代碼，但這裏只是爲了展示不同的方法。

來源

2009-09-14 21:25:07

你可以試試這個。 http://benalman.com/projects/jquery-clickoutside-plugin/

來源

2010-03-01 22:17:05 rado

如果你使用jQuery，您可以使用這樣一個選擇：

$("*:not(#myDiv)").live("click", function(){ 
    $("#myDiv").hide(); 
});

來源

2010-04-06 21:10:48 Kelly

對不起 - 應該是以下內容： $（「*：not（#myTrigger）」）。live（「click」，function（）{ $（「＃myDiv」）。hide ）; }）; – Kelly 2010-04-07 18:35:55

誰投下了，爲什麼？這對我來說非常合適。謝謝！ – 2010-08-10 03:35:56

這是不是附加一個點擊監聽器*不是#myDiv的每一個*元素？似乎比單純的$（'body'）更大的瀏覽器內存負擔。 – 2012-12-10 12:49:27

使用的文檔的事件處理程序很適合我：

 
function popUp(element) 
{ 
    element.onmousedown = function (event) { event.stopPropagation(); }; 
    document.onmousedown = function() { popDown(element); }; 

    document.body.appendChild(element); 
} 

function popDown(element) 
{ 
    document.body.removeChild(element); 

    document.onmousedown = null; 
}

來源

2010-06-09 05:39:38 Gali

這是一個功能爲了處理點擊事件，我給它提供了彈出選擇器和jquery元素。可能更好地作爲一個jQuery插件，但這很簡單。

clickOut = function(selector, element) { 
var hide = function(event) { 
    // Hide search options if clicked out 
    if (!$(event.originalEvent.target).parents(selector).size()) 
    $(element).hide(); 
    else 
    $(document).one("click",hide); 
}; 

$(document).one("click", hide); 
};

所以，如果你有一個像<div class='popup'>test</div>你可以用我的功能一樣clickOut("div.popup", $("div.popup"));

來源

2010-10-05 16:01:14 user467043

的最佳方式彈出元素來做到這一點： -

  
$(document).bind('click', function(e) { 

var $clicked = $(e.target); 

    if (!$clicked.parents().hasClass("divtohide")) { 
     $(".divtohide").hide(); 
    } 

});

來源

2010-11-03 13:18:37

這是一個不錯的優雅的:)如果你使用的是類 – Prof83 2011-03-11 22:44:24

我發現在溶液一個論壇......但我找不到原來的作者。以下是版本（修改後的版本位於我的代碼中）。

$(document).bind('mousedown.yourstuff', function(e) { 
      var clicked=$(e.target); // get the element clicked     
      if(clicked.is('#yourstuff') 
       || clicked.parents().is('#yourstuff')) { 
       // click safe! 
      } else { 
       // outside click 
       closeIt(); 
      } 
     }); 

function closeIt() { 
     $(document).unbind('mousedown.emailSignin'); 
     //... 
}

我也有ESC keyup綁定和一個'close'html錨點，上面沒有照片。

來源

2011-01-08 06:03:41 Yann

如果你不想隱瞞，你將通過點擊展示自己的元素：

var div_active, the_div; 

the_div = $("#the-div"); 
div_active = false; 

$("#show-the-div-button").click(function() { 
    if (div_active) { 
    the_div.fadeOut(function(){ 
     div_active = false; 
    }); 
    } else { 
    the_div.fadeIn(function(){ 
     div_active = true; 
    }); 
    } 
}); 

$("body").click(function() { 
    if div_active { 
    the_div.fadeOut(); 
    div_active = false; 
    } 
}); 

the_div.click(function() { 
    return false; 
});

來源

2011-05-16 05:00:28

比如你點擊一個鏈接元素顯示格菜單，只需綁定模糊功能鏈接元素隱藏DIV菜單

$('a#displaymenu').click(function(){ 
    $("#divName").toggle(); 
}).blur(function() {$("#divName").hide()})

來源

2011-10-17 10:34:40

這爲我工作，

var mouseOver = false; 
$("#divToHide").mouseover(function(){mouseOver=true;}); 
$("#divToHide").mouseout(function(){mouseOver=false;}); 
$("body").click(function(){ 
     if(mouseOver == false) { 
      $("#divToHide").hide(); 
     } 
});

來源

2012-08-01 13:22:55 cupa

 $('body').click(function (event) {   
if ($("#divID").is(':visible')) { 
      $('#divID').slideUp(); 
     } 
});

這可以用來檢查div是否可見，如果它是可見的，它會將對象向上滑動。

來源

2014-08-26 11:28:17 TGarrett

jQuery單擊元素事件

回答

相關問題