Событие Click в строке таблицы - только триггер, если ничего не "щелкнули",

У меня возникают некоторые проблемы с некоторым кодом jQuery, и я надеюсь и думаю, что решение относительно просто.

Скажем, у меня есть таблица вроде:

<table>
   <tr>
     <td><input type="checkbox" name="hai" value="der" /></td>
     <td><a href="mypage.php">My link</a></td>
     <td>Some data</td>
     <td>Some more data</td>
   </tr>
   ...
</table>

Теперь через JavaScript я делаю следующее в jQuery (document).ready();

jQuery("table tr").click(function(){
   var row = jQuery(this);
   var hasClass = row.hasClass("highlight");
   jQuery("table tr").removeClass("highlight");
   if(!hasClass){
     row.addClass("highlight");
   }
});

Все это довольно простой материал - я хочу, чтобы иметь возможность щелкнуть строку и подсвечивать ее, и только одна строка может быть подсвечена за раз (очевидно, в моем фактическом коде я делаю больше) - теперь здесь моя проблема:

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

Ответы

Ответ 1

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

jQuery('table input, table a').click( function(e) {
    e.stopPropagation();
    return true;
}):

Ответ 2

$("table tr").click(function(event){
   if (event.currentTarget.tagName != "TR") { return; }

   $(this).closest("table").find("tr.highlight").removeClass("highlight");
   $(this).addClass("highlight");
});

Ответ 3

$("table tr").click(function(e){

if (e.target instanceof HTMLInputElement || e.target instanceof HTMLAnchorElement){
return;
}
var row=$(this);
$('table tr').removeClass('highlight');
row.addClass('highlight','normal');

})