1

ダイアログ ウィンドウを作成しました。ダイアログウィンドウのボタン（ハイパーリンク）以外の場所をクリックすると、いつでも閉じられるようにします。

クリックをキャッチするために、ダイアログ ウィンドウの背面に 1 つの大きな「オーバーレイ」div (不透明度 0) を作成していましたが、ユーザーが背面にあるもの (別のハイパーリンクなど) をクリックしてダイアログを閉じたい場合、これは非常に問題になります。同時に。オーバーレイがあるため、(ダイアログを閉じるために) アクティブになり、クリックされたハイパーリンクがキャッチされません。

まもなく、ユーザーがダイアログ ウィンドウのボタンをクリックする以外の操作を行うたびにダイアログ ウィンドウを閉じる、この状況の解決策が必要になります。

明確であることを願っています。ありがとうございました。

4

3 に答える 3

1

これは、イベント バブリングが原因です。2 人が @Lilith2k3 の回答に反対票を投じたのは残念です。なぜなら、彼は間違っていなかったし、@Xotic750 のソリューションは複雑すぎたからです。本体にイベント ハンドラーが必要ですが、ダイアログからクリックを除外するだけで済みます。

onclick()2 つのハンドラーが必要です。1 つはダイアログを閉じるための本体で、もう 1 つはイベントのバブリングをキャンセルするためのダイアログです。下記参照

function dlgClickHandler(e) {
    // do dialog stuff, then...
    e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); // cancel event bubbling so body click handler not activated
}

function bodyClickHandler(e) {
    // close dlg
}

これは、ダイアログの ID を比較するだけではこれを行うことができない理由でもあります。これは、クリックが子の 1 つ (たとえば、[OK]、[キャンセル] ボタン) から発生した可能性があるためです。

関数をモジュール パターンでラップして、よりすっきりとしたコンポーネントにしました。最初の例では jQuery を使用しましたが (そうではないのではないかと思います)、この手法は jQuery よりも前のものです。

jQuery を使用していないと思われる理由の 1 つは、jQuery を使用しているとしたら、このようなダイアログを処理するための多くの jQuery ポップアップ プラグインの 1 つに出くわしたことがあるからです。jQuery を試したことがない場合は、他の多くの点でも役立つ可能性があります。

于 2013-04-28T00:39:53.050 に答える
0

これは非常に基本的なデモンストレーションです。ダイアログを表す黄色divが画面に表示されます。のどこかをクリックすると、div表示されたままになり、div必要に応じて HTML とイベント ハンドラーを追加できます。の外側をクリックするdivと、divが非表示になります。注: イベント ハンドラーをクリーンアップするつもりはありません。

cirrusによる回答を参照してください。ここでは、イベントの伝播と、ソリューションでそれが必要な理由について実際に説明していますが、ここでは行っていません。彼はまた、バニラ javascript とjqueryを使用したソリューションも提供しますが、私はそうではありません。彼はまた、私が持っていないJavaScript モジュール パターンを示しています。彼の建設的な批判と授業料がなければ、この回答を提供することはできなかっただろう. 幸運を。

CSS

.box {
    width:300px;
    height:100px;
    position: absolute;
    top: 30%;
    left: 30%;
    background-color:yellow;
    border:2px solid;
}
#message {
    position: absolute;
    right: 50%;
    bottom: 50%;
}
#button1 {
    position: absolute;
    right: 0;
    bottom: 0;
}
#button2 {
    position: absolute;
    right: 4em;
    bottom: 0;
}

HTML

<div id="box" class="box">
    <div id="message"></div>
    <button id="button1">
        <img src="http://img856.imageshack.us/img856/3817/ticklf.png" alt />Ok</button>
    <button id="button2">
        <img src="http://img822.imageshack.us/img822/1917/crossn.png" alt />Cancel</button>
</div>

JavaScript

function dontBubble(evt) {
    evt.stopPropagation();
}

function hideBox(evt) {
    box.hidden = true;
}

function messgage() {
    document.getElementById("message").textContent = "I'm ignoring you";
}

document.getElementById("box").addEventListener("click", dontBubble, false);
document.getElementById("button1").addEventListener("click", messgage, false);
document.getElementById("button2").addEventListener("click", hideBox, false)
document.addEventListener("click", hideBox, false)

;

jsfiddleについて

于 2013-04-27T20:21:34.113 に答える
-1

At best, you would bind a click event to $("body"), which checks, where the user clicked and in case the user clicked not within the dialog, you could unbind the event and close the dialog.

于 2013-04-27T19:57:55.997 に答える