JQuery Table Row Click Event также срабатывает, когда я нажимаю ссылку

Вот что я до сих пор получил, что номер строки работает отлично, но мне нужно сделать так, чтобы при щелчке по ссылке в таблице он не запускал код внутри функции.

<table>
  <tr class="row">
    <td>A</td>
    <td><a class="link" href="foo.html">Foo</a></td>
  </tr>
  <tr class="row">
    <td>B</td>
    <td><a class="link" href="Bar.html">Bar</a></td>
  </tr>
</table>


<script>
$(function(){
    $('.row:not(.link)').click(function(){
        var $row = $(this).index();
    });
});
</script>

Ответ 1

Селектор .row: not (.link) выберет все элементы, которые имеют класс "row" и не имеют класса "link", который не является тем, что вы ищете.

Вам нужно использовать event.stopPropagation в событии click элемента a.link, чтобы событие click не распространялось на родителей, включая строку.

Попробуйте следующее:

<table>
    <tr class="row">
        <td>A</td>
        <td><a class="link" href="foo.html">Foo</a></td>
    </tr>
    <tr class="row">
        <td>B</td>
        <td><a class="link" href="Bar.html">Bar</a></td>
    </tr>
</table>

<script> 
    $(function(){     
        $('.row').click(function(){         
            var $row = $(this).index();     
        }); 
        $('.row .link').click(function(e){
            e.stopPropagation(); 
        });
    }); 
</script>

Ответ 2

Вот как быстро исправить в jquery, просто используйте instanceof

  $("#news-table tr").click(function(e){
      if((e.srcElement instanceof HTMLAnchorElement)!=true  )console.log("IIIIIIHA HA!");
  });

Ответ 3

Немного поздно, но это первая ссылка в Google, которую я открыл в поиске решения относительной темы. Таким образом, это может стать полезным для кого-то:

$(".clickableRow").click(function(e) {
  if (e.target.nodeName != "A") {
    window.document.location = $(this).attr("href");
  }
});

Ответ 4

Вам нужно предотвратить распространение события в событии клика ссылок - здесь образец: http://jsfiddle.net/6t8u7/1/

Как вы можете видеть, нажатие на ссылку просто запускает одно событие. Нажатие на строку вызывает другое событие.

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

Ответ 5

С атрибутом данных нет необходимости в классе:

$(document).on('click', '[data-href]', function(e) {
    if($(e.target).hasClass('ignore'))
        return;
    var ignore = ['input', 'a', 'button', 'textarea', 'label'];
    var clicked = e.target.nodeName.toLowerCase();
    if($.inArray(clicked, ignore) > -1)
        return;
    window.location = $(this).data('href');
});

Пример использования (tr - это просто пример - вы можете использовать div и т.д.):

<tr data-href="your_url">
    <td class="ignore">Go nowhere</td>
    <td>Go to your_url</td>
    <td><a href="another_url">Go to another_url</a></td>
    <td><input type="text" value="Go nowhere"></td>
</tr>

Ответ 6

Вы также можете использовать это без явного выбора строки во второй функции.

$(function(){     
    $('.row').click(function(){         
        var $row = $(this).index();     
    }); 
    $('.link').click(function(event){
       event.preventDefault();
       event.stopPropagation();
    });
});

Ответ 7

Просто добавьте: if (e.target.tagName == 'A') return;, чтобы щелкнуть строку, и элемент Link будет использовать свою собственную логику.

Вот более подробный пример:

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

    // Skip if clicked on <a> element
    if (e.target.tagName == 'A') return;

    // Logic for tr click ...

});