jQueryバインディングとJavaScript event.stopPropagation（）

Question

私は2つのdivを含むTDを持っています。最初のdivはテキストを含み、表示されます。 2番目のdivにはテキストエリアがあり、デフォルトでは非表示になっています。以下のコードを使用して、私は、TDのクリックイベントと結合してクリック上のdivのの可視性を入れ替えました：これは動作しますが

$(".tdEstimatorNote").click(function (e) 
{ 
    $(this).find("div:first").toggle("400"); 
    $(this).find("div:first").next().toggle("400"); 
    $(this).find(".estimatorNotesTA").focus(); 
}); 

は、それがテキストエリアの問題を作成しました。可視になった後にテキストエリアにフォーカスを置くと、divの表示が再び切り替わります（TDのクリックイベントに拘束されているため）。だから、私の解決策は、イベントの伝播を停止：

$(".estimatorNotesTA").click(function (event) 
{ 
    event.stopPropagation(); 
}); 

これは動作します。私は自由にテキストエリア内を自由に編集してクリックすることができますが、任意のテキストを選択することはできません（私は上記のjQueryのために仮定しています）。私の前提は間違っている可能性があります。なぜなら、キーボードからもテキストを選択することができないからです（shift + endまたはshift + home）。どんな考え/提案ですか？

ありがとうございます！

Answer 1

ない問題がから来ている、しかし、あなただけのテキストエリアがクリックされたかどうかをテストすることができる場所を確認してください。

$(".tdEstimatorNote").click(function (e){ 
    if(!$(e.target).hasClass('estimatorNotesTA')) { 
     //Toggle CSS class 
     // use method chaining :) 
     $(this) 
      .find("div:first").toggle("400"); 
       .next().toggle("400").end() 
      .end() 
      .find(".estimatorNotesTA").focus(); 
    } 
}); 

Answer 2

あなたはいつも、おそらくあなたに1つのインデントレベルを保存し、「早期帰宅」のパターンを、使用することができます読みやすさにも役立ちます。

$(".tdEstimatorNote").click(function (e){ 
    if($(e.target).hasClass('estimatorNotesTA')) return; 

    //Toggle CSS class 
    // use method chaining :) 
    $(this) 
     .find("div:first").toggle("400"); 
     .next().toggle("400").end() 
     .end() 
     .find(".estimatorNotesTA").focus(); 
});