2つの別々のonClickイベントを別々の要素内に持つ方法

Question

<div>の中に<div>という要素があります。私は含まれているdivの上にonClickイベントがありますが、私はそのonClickイベントが無視されるようにしたいので、別のonClickイベントが発生します。ここにいくつかのコード例があります：

<div id='container' onClick='javascript:function1();'> 
    outside of the inside div 
    <div id='inside' onClick='javascript:function2();'> 
    inside the inside div 
    </div> 
</div> 

コンテナは1つの大きなボックスであり、内側のdivは内部の小さなボックスです。基本的にコードが現在動作する方法は、 "inside"をクリックするたびに、 "container"と "inside"の両方のonClickを起動します。私はそれを望んでいない。私はそれぞれが独自のonClickイベントを持つことを望みます。これは可能ですか？

Answer 1

function2()を入れてください。return falseは、イベントの書き込みを防止します。あなたはjQueryの

$(function(){ 
    $("#container").click(function(){ 
     function1(); 
    }); 

    $("#inside").click(function(){ 
     function2(); 
     return false; 
    });  
}); 

あなたをHTMLマークアップからイベントハンドラを削除し、

HTML

<div id='container'> 
    outside of the inside div 
    <div id='inside'> 
    inside the inside div 
    </div> 
</div> 

document.readyの内側にそれを置くことができ、あなたのタグにjqueryのを言及しているので

戻り値falseの代わりにevent.stopPropagation()を使用することもできます。