子アンカーがクリックされたときに親のonclickイベントが発生しないようにするにはどうすればよいですか？

私は現在、jQueryを使用してdivをクリック可能にしており、このdivにもアンカーがあります。私が遭遇している問題は、アンカーをクリックすると、両方のクリックイベントが発生することです（divとアンカー）。アンカーがクリックされたときにdivのonclickイベントが発生しないようにするにはどうすればよいですか？

壊れたコードは次のとおりです。

JavaScript

var url = $("#clickable a").attr("href");

$("#clickable").click(function() {
    window.location = url;
    return true;
})

HTML

<div id="clickable">
    <!-- Other content. -->
    <a href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

イベントは、クリックイベントが関連付けられているDOMの最も高いポイントにバブルします。したがって、この例では、divに明示的にクリック可能な要素が他にない場合でも、divのすべての子要素は、DIVのクリックイベントハンドラーがキャッチするまで、DOMまでクリックイベントをバブルします。

これに対する2つの解決策は、イベントを実際に誰が発生させたかを確認することです。jQueryは、イベントとともにeventargsオブジェクトを渡します。

$("#clickable").click(function(e) {
    var senderElement = e.target;
    // Check if sender is the <div> element e.g.
    // if($(e.target).is("div")) {
    window.location = url;
    return true;
});

リンクにクリックイベントハンドラーをアタッチして、独自のハンドラーの実行後にイベントバブリングを停止するように指示することもできます。

$("#clickable a").click(function(e) {
   // Do something
   e.stopPropagation();
});

stopPropagationメソッドを使用します。例を参照してください。

$("#clickable a").click(function(e) {
   e.stopPropagation();
});

jQuery Docsによると：

stopPropagation メソッドは、イベントがDOMツリーを泡立たせないようにし、親ハンドラーにイベントが通知されないようにします。

それはしないことに注意してください、このイベント処理するために、他の人のリスナーを防ぐことが望ましい効果ではない場合、あなたが使用する必要があり、（ボタンの例：複数のクリックハンドラを）stopImmediatePropagation代わりに。

ここで、jQuery以外のコード（純粋なJavaScript）を探しているすべての人のための私の解決策

document.getElementById("clickable").addEventListener("click", function( e ){
    e = window.event || e; 
    if(this === e.target) {
        // put your code here
    }
});

親の子をクリックしても、コードは実行されません

あなたもこれを試すことができます

$("#clickable").click(function(event) {
   var senderElementName = event.target.tagName.toLowerCase();
   if(senderElementName === 'div')
   {
       // do something here 
   } 
   else
   {
      //do something with <a> tag
   }
});

いずれにせよ内部要素と対話するつもりがない場合は、CSSソリューションが役立つ場合があります。

内部要素を次のように設定するだけです pointer-events: none

あなたの場合：

.clickable > a {
    pointer-events: none;
}

または、一般的にすべての内部要素をターゲットにするには：

.clickable * {
    pointer-events: none;
}

この簡単なハックにより、ReactJSでの開発中に多くの時間を節約できました

ブラウザのサポートはここにあります：http : //caniuse.com/#feat=pointer-events

クリッカブルdivに複数の要素がある場合は、次のようにする必要があります。

$('#clickable *').click(function(e){ e.stopPropagation(); });

return false;またはe.stopPropogation();を使用すると、さらにコードを実行できなくなります。この時点でフローが停止します。

誰かが必要なら書いて（私のために働きました）：

event.stopImmediatePropagation()

このソリューションから。

インライン代替：

<div>
    <!-- Other content. -->
    <a onclick='event.stopPropagation();' href="http://foo.com">I don't want #clickable to handle this click event.</a>
</div>

これはAngular 2+を使用した例です

たとえば、ユーザーがモーダルコンポーネントの外側をクリックした場合にそれを閉じる場合：

// Close the modal if the document is clicked.

@HostListener('document:click', ['$event'])
public onDocumentClick(event: MouseEvent): void {
  this.closeModal();
}

// Don't close the modal if the modal itself is clicked.

@HostListener('click', ['$event'])
public onClick(event: MouseEvent): void {
  event.stopPropagation();
}

イベントが親（div）に到達（バブリング）しないようにする必要があります。こちらのバブリングに関する部分と、こちらの jQuery固有のAPI情報を参照してください。

サブ要素をクリック不可として指定するには、以下の例のようにcss階層を記述します。

この例では、クラス ".subtable"を持つテーブル内のtr内のtd内のすべての要素（*）への伝播を停止します

$(document).ready(function()
{    
   $(".subtable tr td *").click(function (event)
   {
       event.stopPropagation();
   });

});

ignoreParent（）は純粋なJavaScriptソリューションです。

これは、マウスクリックの座標を子要素の座標と比較する中間レイヤーとして機能します。2つの簡単な実装手順：

1.ページにignoreParent（）コードを配置します。

2.親の元のonclick = "parentEvent（）;"の代わりに 、 書く：

onclick="ignoreParent(['parentEvent()', 'child-ID']);"

任意の数の子要素のIDを関数に渡し、他の要素を除外することができます。

子要素の1つをクリックした場合、親イベントは発生しません。親をクリックしたが、子要素[引数として提供]をクリックしなかった場合、親イベントが発生します。

GithubのignoreParent（）コード

インラインコンテキストの場合、HTMLでこれを試してください。

onclick="functionCall();event.stopPropagation();

誰かがReactを使用してこの問題を抱えていた場合、これが私がそれを解決した方法です。

scss：

#loginBackdrop {
position: absolute;
width: 100% !important;
height: 100% !important;
top:0px;
left:0px;
z-index: 9; }

#loginFrame {
width: $iFrameWidth;
height: $iFrameHeight;
background-color: $mainColor;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
margin-top: calc(-1 * #{$iFrameHeight} / 2);
margin-left: calc(-1 * #{$iFrameWidth} / 2);
border: solid 1px grey;
border-radius: 20px;
box-shadow: 0px 0px 90px #545454; }

コンポーネントのrender（）：

render() {
    ...
    return (
        <div id='loginBackdrop' onClick={this.props.closeLogin}>
            <div id='loginFrame' onClick={(e)=>{e.preventDefault();e.stopPropagation()}}>
             ... [modal content] ...
            </div>
        </div>
    )
}

子モーダル（コンテンツdiv）のonClick関数を追加することにより、マウスクリックイベントが親要素の「closeLogin」関数に到達するのを防ぎます。

これでうまくいきました。2つのシンプルなdivでモーダルエフェクトを作成できました。

a次のように追加します。

<a href="http://foo.com" onclick="return false;">....</a>

またはreturn false;クリックハンドラーからの#clickableように：

  $("#clickable").click(function() {
        var url = $("#clickable a").attr("href");
        window.location = url;
        return false;
   });

すべてのソリューションは複雑でjscriptです。これが最も単純なバージョンです。

var IsChildWindow=false;

function ParentClick()
{
    if(IsChildWindow==true)
    {
        IsChildWindow==false;
        return;
    }
    //do ur work here   
}


function ChildClick()
{
    IsChildWindow=true;
    //Do ur work here    
}

<a onclick="return false;" href="http://foo.com">I want to ignore my parent's onclick event.</a>