jQuery: проблема с интерактивными строками

У меня есть таблица с классом «myClass» в каждой строке, которая запускает функцию jQuery, щелкая строку таблицы.

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

Есть ли способ предотвратить запуск события щелчка строки, когда я нажимаю кнопку в этой строке? Я хочу, чтобы событие запускалось только при нажатии на фон строки, но не при нажатии любой кнопки в строке.

Большое спасибо за любую помощь в этом, Тим.


javascript jquery onclick buttonclick
person user2571510    schedule 23.02.2014    source источник
comment
сначала поделитесь своим javascript, пожалуйста.   -  person Suman Bogati    schedule 23.02.2014

Ответы (1)


arrow_upward
1
arrow_downward

В верхней части обработчика событий click поместите следующее:

if ($(event.target).prop('type').toLowerCase() !== 'table' ||
    ! $(event.target).hasClass('myClass')) {
    event.stopImmediatePropagation();
    return;
}

Это говорит: «Если фактический элемент не является таблицей или не имеет класса «myClass», тогда остановите событие здесь и сейчас (часть return). stopImmediatePropagation() означает, что он не будет распространяться обратно на исходный селектор (в данном случае ваш «table.myClass»).

Если вы хотите, чтобы пользователь мог нажимать НИЧЕГО внутри вашей таблицы, кроме кнопок, вы должны использовать это:

if ($(event.target).prop('type').toLowerCase() === 'button') {
    event.stopImmediatePropagation();
    return;
}

Это позволит кликам по другим элементам, таким как входы, изображения, промежутки, div и т. д., по-прежнему запускать его. Если это нежелательное поведение, вам следует подумать о размещении события click в ячейках таблицы, а не во всей таблице, а затем просто проверить, что целевой тип не является td.

person Derek    schedule 23.02.2014
comment
Спасибо - это тоже очень полезно! - person user2571510; 23.02.2014
comment
Я решил использовать этот. Большое спасибо за отличное объяснение. - person user2571510; 23.02.2014