onclickハンドラを使用した要素の上にあるリンク

Question

ねえ。私は馬鹿だが厄介な問題を抱えている。

<div onclick="doSomething(); return false;"> 
    lorem ipsum <a href="somewhere.html">dolor sit</a> amet 
</div> 

...リンクがクリックされたときにトリガされることから、親のdivのonclickのハンドラを防ぐために、任意の（便利な）方法がある：私はこの（簡体字）の状況を持っていれば

。

私のシナリオでは、大きな折り返しdivがあり、onclick-handlerで "link"になっていますが、リンクにテキストデータをオーバーレイしたいのですが、少なくともFirefoxではテキスト内のリンクをクリックすると、親のonclickが最初に実行されます。

Answer 1

この問題を回避するには、ハンドラでイベントの元のターゲットをテストします。

function doSomething (e) { 
    // get event object and target element 
    var e = e || window.event; 
    var target = e.srcElement || e.target; 
    // is target a div? 
    if (target && /^div$/i.test(target.nodeName)) { 

    // do your magic in here ... 

    } 
} 

Answer 2

IMHO、これはHTML /動作の悪いネスティングです。 div全体を1つの要素としてクリックするか、またはリンクをクリックすることはできますが、両方を同時に行うことはできません。

Answer 3

jQueryでは、各アンカーにクリックハンドラを追加し、event.stopPropagation()を使用して、イベントがDIVまでバブリングしないようにすることができます。

$('div#wrapperDiv > a').click(function(event) { 
     event.stopPropagation(); 
    });