1

<a>と<input>タグには異なる動作が存在することに気付きました。

<div id="dialog">Your non-modal dialog</div>

<!--<a href="#" id="open">Open dialog</a>-->
<input id="open" value="Open dialog">

$('#open').click(function() {
    $('#dialog').dialog('open');
});

$('#dialog').dialog({
    autoOpen: false,
    modal: false
});

// Close Pop-in If the user clicks anywhere else on the page
jQuery('html') //set for html for jsfiddle, but should be 'body'
    .bind('click', function(e){
        if (jQuery('#dialog').dialog('isOpen')
            && !jQuery(e.target).is('.ui-dialog, a')
            && !jQuery(e.target).closest('.ui-dialog').length)
        {
            jQuery('#dialog').dialog('close');
            alert("close_dialog");
        }
    }
);

を使用している場合<a>、クリック イベントはドキュメントに伝達されません。を使用している場合<input>、クリック イベントはドキュメントにバブルされ、入力をクリックするとダイアログが直接閉じます。これは stopPropagation で処理できることを知っています。問題は、なぜ<a>タグ イベントが発生しないのかということです。何か不足していますか？

ここにデモンストレーションするフィドルがあります。のコメントを外して<a>をコメントし<input>、それをクリックして違いを確認します。

この質問のジェイソンの回答から借用したコード。

4

2 に答える 2

1

問題は次の行にあります。

&& !jQuery(e.target).is('.ui-dialog, a')

イベントターゲットが「a」タグまたはクラス「.ui-dialog」の要素であるかどうかを jQuery に問い合わせています。次のようにセレクターの「a」タグを削除すると、希望どおりに機能するはずです。

&& !jQuery(e.target).is('.ui-dialog')

変更されたフィドルは次のとおりです http://jsfiddle.net/PRQNY/1/

PS: イベントについての理解を確認するためだけに。標準 DOM イベント モデルの要素タグに関係なく、すべてのイベントがバブルアップします。

于 2012-12-05T11:08:49.963 に答える
0

この行により、if ステートメントが false になるため、if ステートメント内にあるアラートは表示されません。

&& !jQuery(e.target).is('.ui-dialog, a')

イベントターゲットはa、イベントがバブルアップしたにもかかわらずクリックしたためです。

于 2012-12-05T11:12:37.087 に答える