1

クリックすると、divの可視性を変更するボタンがあります。

<button type="button" id="editbutton" onclick="plus()" alt="Edit"></button>

function plus() {
var f = document.getElementById('edit');
if (f.style.visibility == 'hidden') {
   f.style.visibility = 'visible';
   }
else
    f.style.visibility = 'hidden';
}

これはうまくいきます。しかし、ユーザーが div の外のどこかをクリックすると、div が非表示に戻るように機能を追加したいと思います。

最初は独自の方法を試しましたが、ボタンをクリックしてdivを表示すると、新しいコードによって再び非表示になるため、成功しませんでした。他の人が投稿したjQueryの例をいくつか調べましたが、試したもののどれもこの問題を解決していません。どんな助けでも大歓迎です。

編集:明確にするために、問題は、ユーザーがボタンをクリックすることによってdivが最初に表示されるため、ボタンをクリックするたびにdivが表示されるが、それが本体のクリックとしてカウントされるため、すぐに再び非表示になることですページ。

4

3 に答える 3

3

ユーザーが div 内をクリックしたときに、クリック イベント ハンドラー内からイベントで 'e.stopPropagation()' を呼び出すことができます。これにより、イベントが DOM を「バブリング」するのを停止します。

次に、クリックをリッスンする BODY 要素にイベント ハンドラーをアタッチすると、そのイベント ハンドラーを使用して DIV を非表示にすることができます。DIV 自体をクリックしても、イベントが BODY ハンドラーにバブルアップされないことがわかっています。

このようにして、ハンドラーが stopPropagation() も呼び出さない限り、別の要素をクリックすると、ハンドラーによってキャッチされます。そのため、div を非表示にしたくない場合は、必要に応じて stopPropagation() を呼び出すことで非表示にすることができます。

例えば：

$("#edit-button").click( function(e) {
    $("#edit").toggle();
    e.stopPropagation();
});

$('#edit').click(function(e) {
    e.stopPropagation();
});

$("body").click( function(e) {
    $("#edit").hide();
});
于 2012-10-13T23:49:11.110 に答える
0

要素にクリック ハンドラーを設定しますbody。イベントでは、event.target一致するかどうかを確認できます。一致するdiv場合: 何もせず、そうでない場合: 非表示にします。

document.body.onclick = function(event) {
    if (event.target === f) {
        // user clicked on the div, do nothing
    } else {
        f.style.visibility = "hidden";
    }
};

div編集内に要素がある場合(および が一致しない場合)、これはもう少し複雑になります.targetが、解決策を考え出すことができると確信しています :) (それは可能です)。

于 2012-10-13T23:49:03.033 に答える
-1

あなたは自分が何をしているのか知っているように見えるので、手短にします。

jquery で .click 関数を記述します。

ボタンにID（またはそれが入っているdiv）を与えます

$('#buttonidordiv').click(function(){
 $('#divtoshow').show() // put in a number to create a fade in seconds.
//your stuff here
}

誰かがそれ以外の場所をクリックすると... window を使用できるはずです。それ以外の場合は、別の div (ラッパーなど) を使用できます。

それで

$('window').click(function(){
$('#samediv').hide() //same as above
//your stuff here

}

気づいてください、私はが苦手)};なので、どこかに追加する必要があるかもしれません;）

頑張ってください！

于 2012-10-13T23:50:44.650 に答える