JQuery Binding & JavaScript event.stopPropagation ()

Question

У меня есть TD, который содержит два div.Первый div содержит текст и является видимым.Второй div содержит текстовую область и по умолчанию скрыт.Используя приведенный ниже код, я связался с событием click 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

Вы всегда можете использовать шаблон «вернуться домой раньше», который сэкономит вам один уровень отступов и, возможно, поможет с удобочитаемостью.

$(".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();
});