0

ボタンをクリックしてオーバーレイを作成し、ユーザーがオーバーレイの外側をクリックすると削除しようとしています。私の例では、オーバーレイがクリックされると、ターゲットは長さ「0」を返します。このメソッドを使用した他の例でこのメソッドが機能する理由がわかりません。何か案が？

ここにjsがあります

$(document).ready(function() {
    $(document).on("click",".pop", function() {
       if ($('#search-overlay').length === 0) {
           $('body').append('<div id="search-overlay"></div>');
        }
    });
    $(document).on("mouseup", function(e) {
      var container = $("#search-overlay");
      if (container.has(e.target).length === 0) {
        alert(container.has(e.target).length);
        container.remove();
      }
    });
});

そして、あなたがそれを実際に見ているリンクhttp://jsfiddle.net/CwrAh/

4

1 に答える 1

3

これ.has()は、子孫を検索するためであり、jQuery オブジェクト内の要素と一致しません。ロジックを修正するための 1 つの追加チェック:

if (!container.has(e.target).length && !container.is(e.target)) {

フィドル

パフォーマンスが懸念される場合は、要素とjQuery オブジェクト内に含まれる最初の要素とのis()間の単純な比較で関数を置き換えることができます。e.targetcontainer

 if (!container.has(e.target).length && container[0] !== e.target) {

フィドル＃1.1

次のようにしてさらに単純化することもでき.closest()ます。

if (!$(e.target).closest(container).length) {

フィドル＃2

同じロジックですが、逆です。closestjQuery オブジェクト内に含まれる要素で照合を開始し、DOM ツリーを上に移動して、一致する祖先オーバーレイを探します。最初のバージョンと同じ結果。

そして、論理テストの必要性を破棄する 3 番目のバリエーションです。イベントの伝搬をオーバーレイに停止する mouseup ハンドラーをアタッチして、次のようにしますdocument。

$('body').append($('<div>', {
    id: 'search-overlay',
    mouseup: function(e) {
        e.stopPropagation();
   }
}));

フィドル＃3

于 2013-02-17T00:27:12.083 に答える