divをオーバーレイしてマウスクリックをキャッチする

Question

div内にテキストエリアがあります。 オーバーレイをクリックしたいと思っています。 しかし、何が起こるのは、テキストエリアがクリックだけでなくdivをキャッチすることです。

<div id="d" name="d"><textarea id="ta" name="ta">my text</textarea></div> 

<script type="text/javascript"> 
$('#d').click(function(){alert("clicked on div");)}; 
$('#ta').click(function(){alert("clicked on textarea");)}; 
</script> 

私はちょうどdivアラートを発射し、テキストエリアではありません。

Answer 1

まずjavascriptのエラーを防ぐために、最後に括弧の順番を並び替える：

$('#d').click(function(){alert("clicked on div");}); 
$('#ta').click(function(){alert("clicked on textarea");}); 

は、その後、私はthis exampleを参照して、両方のアラートを取得します。

=== === UPDATE

（あなたは泡立ちを防止していない場合）イベントが最低まで、上のDOM要素から泡。だから、textareaの後にイベントをバブリングすることをやめることはできますが、textareaではなくdivに入るのを防ぐことはできません。 html要素（divとtextarea）の順番を変更して、divクリックハンドラの末尾にreturn false;を追加するか、event.stopPropagation();を追加する必要があります。私のupdated exampleまたは私のnext exampleも見てください。