javascript - 画像の外側をクリックしたときに div を非表示にする

Question

いくつかの非表示の div がある Web ページがあります。画像をクリックすると表示され、もう一度画像をクリックすると非表示になるように設定しています。問題は、それらが表示されていて、ページの一部がクリックされた場合、それらを非表示にする必要があることです。私は高低を検索し、いくつかの提案を見つけましたが、まだ機能するものを見つけていません. 誰でも助けることができますか？

Answer 1

$(window).click(function() {
    $('img').hide();
});

非常に単純な例

Answer 2

私は通常、 document.click イベントをバインドして外部のクリックをリッスンし、ウィンドウが閉じられたときにそれを削除します。

// in function after your image shows up.
document.click = hideImage;
// other code to hide image when image is clicked

// in function after your image is hidden.
document.click = null;

jQuery を使用している場合は、安全な追加と削除のためにイベントに名前を付けることができるため、簡単です。

// in function after your image shows up.
$(document).bind('click.imagehide', hideImage);
// other code to hide image when image is clicked

// in function after your image is hidden.
$(document).unbind('click.imagehide');

この方法はより安全なので、 にバインドされた他のクリック イベントに干渉しませんdocument。

Answer 3

あなたがする必要があるのは、イベントのバブリングを防ぐことです。jquery を使用している場合は、次のことができます。

$(document).on ('click', function () { $('div').hide (); });
$('img').on ('click', function (e) { e.stopPropagation (); });

ニーズに合わせてセレクターを変更することを忘れないでください。