異なる要素の伝搬を停止する

Question

クリックイベント（または伝播）を別の要素から一時的に無効にする方法を決定しようとしています。 特定の要素のイベントでmousedownをクリックすると、別の要素のクリックイベントが発生しなくなりました。

Simplified Example: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<div id="World">World</div> 
<div id="Hello">Hello</div> 

    <script> 
    $(document).mousedown(function (e){ 
     if($('.there').length){ 
      $('.there').remove(); 
      console.log('removed there'); 
      //here is where I would need the '#World' click event to not fire 
     } 
    }); 

    $(document).on('click','#World',function(){ 
     console.log('World'); 
    }); 
    $(document).on('click','#Hello',function(){ 
     console.log('Hello'); 
     $(this).append('<div class="there">there</div>'); 
     console.log('added there'); 
    }); 
    </script> 

Answer 1

イベントは、要素によって発生します...または指定した要素の集合。
すべての子供。

Events happen is this order：«あなたが特定の要素にイベントをマウスダウンをクリックしてください»

1. マウスダウン
2. のmouseup
3. クリック

       は本当にそれを説明する別の方法が必要です...

しかし、私は答えたと思います。

CodePen：

$(document).on("mousedown",function(){ 
    console.log("mousedown"); 
}); 

$(document).on("click",function(){ 
    console.log("click"); 
}); 

$(document).on("mouseup",function(){ 
    console.log("mouseup"); 
}); 

//---- 

$(document).find("#main").on("mousedown click mouseup",function(e){ 
    e.stopPropagation(); 
    console.log("NOTHING...."); 
}); 

$(document).find("#okay input").on("mousedown click mouseup",function(e){ 
    e.stopPropagation(); 
    console.log("Just the OKAY"); 
}); 

コンソールを確認しながら、どこでも JUSTをクリックします。

注意深い目で、継承を無効にする方法がわかります。
どのように "泡立ち"ますか？

Answer 2

私は、2番目の要素からイベントを一時的に削除してから、必要に応じて追加していますが、特定のイベントを一時的に無効にする最もよい方法は、イベントのハンドラにコードを追加してある種の状態変数またはクラス。あなたもmybuttonsイベントの伝播を停止したい場合は、

var buttonsToDisable = $('.mybuttons'), 
    disablerButton = $('#disabler'); 

buttonsToDisable.on('click',function(e) { 
    var ele = $(this); 
    if(!ele.is('.disable-click')) { 
     // some event handler logic here 
    }; 
}); 

// Toggle click-events on all buttons with the .mybuttons class when clicked 
disablerButton.on('click',function(e) { 
    if(!buttonsToDisable.is('.disable-click')) { 
     buttonsToDisable.addClass('disable-click'); 
    } else { 
     buttonsToDisable.removeClass('disable-click'); 
    }; 
}); 

そしてちょうどそのifステートメントにelseを追加して、そこにイベントのstopPropagation()関数を呼び出す：私は悪いが、ので、ここで簡単な例だという文言ような気がします。

Answer 3

#Worldが親の子であるため、#Worldをクリックすると、そのクリックイベントが発生し、parent（div、bodyなど）、次にhtmlが発生します。

＃ワールドで伝播を停止する場合は、親イベントのイベントをクリックしても1回も発生しません。

#Worldをクリックしたときに利用可能な部分があるかどうかを確認する必要があると思います。すなわち

$(document).on('click','#World',function(){ 
    if ($('.there').length) { 
     return; // or return false; 
    } 

    else { 
     //code you want to execute 
     console.log('World'); 
    } 
});