ページ上の任意の場所をクリックしたときに表示される要素を非表示にするこれが正しい方法であるかどうかを知りたいです。
$(document).click(function (event) {
$('#myDIV:visible').hide();
});
要素 (div、span など) は、要素の境界内でクリック イベントが発生したときに消えてはなりません。
243661 次
21 に答える
209
私が理解している場合は、div 以外の場所をクリックしたときに div を非表示にする必要があります。次のコードでそれを行うことができます。
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
これにより、クリックがページ全体にバインドされますが、問題の div をクリックすると、クリック イベントがキャンセルされます。
于 2009-04-03T16:07:41.170 に答える
26
これを試して
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
私は ID の代わりにクラス名を使用します。
編集 -別のピースを追加したため、次のように機能します。
$('.myDiv').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$('.openDiv').click(function() {
$('.myDiv').show();
});
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
于 2009-04-03T15:39:01.597 に答える
22
jQuery 1.7 の時点で、イベントを処理する新しい方法があります。これを「新しい」方法で行う方法を示すために、ここで答えると思いました。まだお持ちでない場合は、「on」メソッドの jQuery ドキュメントを読むことをお勧めします。
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);
ここでは、jQuery のセレクターとイベントのバブリングを悪用しています。後でイベント ハンドラーをクリーンアップするように注意してください。この動作は$('.container').one( docs を参照) で自動化できますが、ハンドラー内で条件を実行する必要があるため、ここでは適用できません。
于 2012-05-30T01:27:46.687 に答える
14
この次のコード例は、私にとって最もうまくいくようです。divまたはその子のイベントのすべての処理を停止する「return false」を使用できますが。ポップアップ div (ポップアップ ログイン フォームなど) を制御したい場合は、event.stopPropogation() を使用する必要があります。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $('#box');
var link = $('#link');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>
于 2009-07-17T16:02:43.307 に答える
6
ありがとう、トーマス。私はJSが初めてで、問題の解決策を探していました。あなたのことが役に立ちました。
jquery を使用して、下にスライドするログイン ボックスを作成しました。最高のユーザー エクスペリエンスを実現するために、ユーザーがボックス以外の場所をクリックするとボックスが消えるようにしました。これを修正するのに約 4 時間を費やすのは少し恥ずかしいです。でもねえ、私はJSが初めてです。
多分私のコードは誰かを助けることができます:
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function () {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $('#box');
var login = $('.login');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
于 2010-04-21T11:09:16.020 に答える
5
私は以下を行いました。他の誰かが利益を得ることができるように共有することを考えました。
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});
これについて誰かを助けることができるかどうか教えてください。
于 2012-05-21T15:32:48.440 に答える
5
あなたもできることは次のとおりです。
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});
ターゲットが div でない場合は、その長さがゼロに等しいことを確認して div を非表示にします。
于 2013-05-11T15:06:35.760 に答える
4
これを試して：
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});
于 2015-08-16T06:14:18.177 に答える
3
$(document).on('click', function(e) { // Hides the div by clicking any where in the screen
if ( $(e.target).closest('#suggest_input').length ) {
$(".suggest_div").show();
}else if ( ! $(e.target).closest('.suggest_container').length ) {
$('.suggest_div').hide();
}
});
ここで #suggest_input in はテキストボックスの名前、.suggest_container は ul クラス名、.suggest_div は自動提案のメイン div 要素です。
このコードは、画面内の任意の場所をクリックして div 要素を非表示にするためのものです。すべてを行う前に、コードを理解してコピーしてください...
于 2015-05-28T05:53:37.090 に答える
3
非子要素でクリックが発生したときにコンテナー div を非表示にする別の方法。
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
});
于 2014-09-17T18:46:29.223 に答える
2
これは、Sandeep Pal の回答に基づいた有効な CSS/小さな JS ソリューションです。
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});
チェックボックスをクリックしてから、メニューの外側をクリックして試してください。
于 2015-07-28T10:08:22.260 に答える
2
$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});
しかし、これらのことにも留意する必要があります。http://css-tricks.com/dangers-stopping-event-propagation/
于 2015-02-03T10:49:08.187 に答える
1
これは機能しません。内部をクリックすると、.myDIVが非表示になります。
$('.openDiv').click(function(e) {
$('.myDiv').show();
e.stopPropagation();
})
$(document).click(function(){
$('.myDiv').hide();
});
});
<a class="openDiv">DISPLAY DIV</a>
<div class="myDiv">HIDE DIV</div>
于 2009-04-03T15:58:55.717 に答える
1
上記の提案に対する2つの小さな改善：
- ドキュメントのバインドを解除します。完了したらクリックします
クリックを想定して、これをトリガーしたイベントの伝播を停止します
jQuery(thelink).click(function(e){ jQuery(thepop).show(); // bind the hide controls var jpop=jQuery(thepop); jQuery(document).bind("click.hidethepop", function() { jpop.hide(); // unbind the hide controls jQuery(document).unbind("click.hidethepop"); }); // dont close thepop when you click on thepop jQuery(thepop).click(function(e) { e.stopPropagation(); }); // and dont close thepop now e.stopPropagation(); });
于 2012-02-13T16:21:54.847 に答える
1
$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>于 2017-10-15T10:07:40.407 に答える
0
これは、上記の他のソリューションから作成されます。
$(document).ready(function(){
$("button").click(function(event){
$(".area").toggle();
event.stopPropagation(); //stops the click event to go "throu" the button an hit the document
});
$(document).click(function() {
$(".area").hide();
});
$(".interface").click(function(event) {
event.stopPropagation();
return false;
});
});
<div>
<div>
<button> Press here for content</button>
<div class="area">
<div class="interface"> Content</div>
</div>
</div>
</div>
于 2020-08-11T19:15:13.090 に答える