親要素のクリックイベントのみをキャンセルします

Question

私はdiv構造を持っています。

<div id="parentDiv"> 
    Employee Data 
    <a>Click Here</a> 
</div> 

親のdivのクリックイベントは、サードパーティ製のプラグインによってすべての準備ができています。そのdivのクリックでいくつかの検証をしています。

「ここをクリック」というアンカータグのクリックに対して何らかのアクションを実行したいが、divのクリックのために登録されている検証を実行したくない。

ユーザーが[社員データ]をクリックすると、クリックイベントとして登録された検証が実行されます。

私は

<a onclick="(arguments[0]||window.event).stopPropagation();">Click Here</a> 
<a onclick="(arguments[0]||window.event).cancelBubble=true;"></a> 

を試してみましたが、イベントをクリックし、それはアンカータグすなわち彼自身のクリックイベントをキャンセルします。

Answer 1

stopPropagation()が必要ですが、発生したクリックイベントで直接呼び出す必要があります。 「あなただけのdidnの場合

document.querySelector('#parentDiv').addEventListener('click', function() { 
 
    console.log('parent clicked'); 
 
}) 
 

 
document.querySelector('#parentDiv a').addEventListener('click', function(e) { 
 
    e.stopPropagation(); 
 
    console.log('child clicked'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parentDiv"> 
 
    Employee Data 
 
    <a href="#">Click Here</a> 
 
</div>