3

ページに「Li」タグを動的に追加します。

各「Li」には、次のようなコードがあります。

<li id="file-1000">
    <a target="_blank" href="pack.jpg" style="display: block;" class="pirobox_gall first last">
       <img alt="" src="pack_thumb.jpg" class="attached">
       <i style="display: none;" class="icon-close2" id="delIcon-1000"></i>
    </a>
</li>

結果：

ここに画像の説明を入力

イベント:

1）次のように、いくつかのイベントを「a」および「i」タグにバインドします。

$(document)
    .on('mouseenter',
        '#file-1000',
        function () {
            $('#delIcon-1000').fadeIn(200);
        })
    .on('mouseleave',
        '#file-1000',
        function () {
            $('#delIcon-1000').fadeOut(200);
        })
    .on('click',
        '#delIcon-1000',
        function () {
            alert('Close btn is clicked');
        });

2) 一方、「a」タグには、そのクリック イベントに他のイベントが割り当てられています (jQuery 画像スライド プラグイン: piroBox による)。

したがって、画像をクリックすると、画像の素敵なポップアップが(大きな画像として)表示されますが、[削除]ボタンをクリックすると、大きな画像と「閉じるボタンがクリックされました」というメッセージが一緒に表示されます。

「削除」ボタンをクリックしたとき（子をクリックしたとき）に「a」タグクリックイベント（親イベント）を防止したい。

stopPropagation() を使用することが解決策であることは知っていますが、ここでは機能せず、 $(document).on(....) メソッドでどのように使用できるかわかりません。

編集: いくつかの回答を試しましたが、失敗し、結果は次のようになりました: ここに画像の説明を入力

上の黒いフレームは >>大きな画像を表示するためのポップアップボックスです (このフレームが開かないようにしたいです)

4

2 に答える 2

5

編集

jsFiddle Demo

最初にリストされた非推奨のアプローチは、実際にはここでは機能しないことに注意してください。それは 100% 正しいです。見逃してすみません。実際、そのシナリオはかなり複雑に思えます。外部から、別の要素に接続されているクリック アクションの前に発生するクリック アクションを防ぐにはどうすればよいでしょうか? まあ、「ベストプラクティス」が何であるかは完全にはわかりません。しかし、私はこのアプローチを思いつきました。

クリックイベントを探して要素から dom ツリーを繰り返します。それらのクリック イベントを収集します。収集されたすべてのハンドラーを反復処理し、それらをオーバーロードして、イベントが要素に基づいていた場合に要素をスクリーニングします。

初期設定

$("#file-1000").click(function(e){
 console.log(e);
 alert("some other click"); 
});

$(document)
.on('mouseenter',
    $('#file-1000').selector,
    function () {
        $('#delIcon-1000').fadeIn(200);
    })
.on('mouseleave',
    $('#file-1000').selector,
    function () {
        $('#delIcon-1000').fadeOut(200);
    })
.on('click',
    $('#delIcon-1000').selector,
    function (e) {
        alert('Close btn is clicked');
        e.preventDefault();
    });

上記の反復の実装

function ProtectClick(element){
 var handlers = [];
 var elCopy = element;
 do{
  var handler = jQuery._data( elCopy, "events" );
  if( handler != void 0 && handler.click != void 0){
   handlers.push({el: elCopy, handle: handler.click});
  }
  elCopy = elCopy.parentNode;
 }while( elCopy );

 for( var h in handlers ){
  (function(i){
   for( var cur in handlers[i].handle ){
    (function(n){
     var handlerCopy = handlers[i].handle[n].handler;
     var $sourced;
     if( handlers[i].handle[n].selector ){
      $sourced = $(handlers[i].handle[n].selector);
     }else{
      $sourced = $(handlers[i].el);
     }
     handlers[i].handle[n].handler = function(e){
      if( $sourced.is(element) || element != e.target )handlerCopy(e);
     };       
    })(cur);
   }
  })(h);
 }
}

電話

ProtectClick($('#delIcon-1000')[0]);

非推奨

jsFiddle Demo

あなたが探していたのはpreventDefault

$(document)
.on('mouseenter',
    '#file-1000',
    function () {
        $('#delIcon-1000').fadeIn(200);
    })
.on('mouseleave',
    '#file-1000',
    function () {
        $('#delIcon-1000').fadeOut(200);
    })
.on('click',
    '#delIcon-1000',
    function (e) {
        alert('Close btn is clicked');
        e.preventDefault();
    });
于 2013-04-26T18:40:32.457 に答える