Table tr 和 td 有奇怪的点击事件

Question

我有一个 table 就像下面的片段显示的那样。

$(function(){
  $('.table-price td.go-to-price').click(function(){
    console.log($(this).attr('data-link'));
    goToLink($(this).attr('data-link'));
  })

  $('.table-price tr.go-to-product').click(function(){
    console.log($(this).attr('data-link'));
    goToLink($(this).attr('data-link'));
  })
})


function goToLink(url) {
  location.href = url ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-price">
  <tr class="go-to-product" data-link="http://tahrircenter.com/product/correction-pens/url">
      <td>1</td>
      <td>10013</td>
      <td>عنوان</td>
      <td></td>
      <td>10</td>
      <td>
          <p class="">0</p>
      </td>
      <td class="go-to-price" data-link="http://tahrircenter.com/product/correction-pens/url#price-change" >
          <a href="http://tahrircenter.com/product/correction-pens/url#price-change">IMAGE</a>
      </td>
  </tr>
</table>

tr 有一个 data-link 属性，最后一个 td 有一个不同的 data-link 属性，但是当我点击 tr 元素时，网站导航到 td 元素的 url，而不是 tr 元素。

Answer 1

当您使用 stopPropagation() 单击 td 时，您需要阻止 click 事件冒泡，例如：

$('.table-price td.go-to-price').click(function(e){
  e.stopPropagation();

  console.log($(this).attr('data-link'));
  goToLink($(this).attr('data-link'));
})

希望对您有所帮助。

$(function(){
  $('.table-price td.go-to-price').click(function(e){
      e.stopPropagation();
      
      console.log($(this).attr('data-link'));
      goToLink($(this).attr('data-link'));
  })

  $('.table-price tr.go-to-product').click(function(e){
      e.stopPropagation();

      console.log($(this).attr('data-link'));
      goToLink($(this).attr('data-link'));
  })
})


function goToLink(url) {
  location.href = url ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-price">
  <tr class="go-to-product" data-link="http://tahrircenter.com/product/correction-pens/url">
      <td>1</td>
      <td>10013</td>
      <td>عنوان</td>
      <td></td>
      <td>10</td>
      <td>
          <p class="">0</p>
      </td>
      <td class="go-to-price" data-link="http://tahrircenter.com/product/correction-pens/url#price-change" >
          <a href="http://tahrircenter.com/product/correction-pens/url#price-change">IMAGE</a>
      </td>
  </tr>
</table>

Table tr 和 td 有奇怪的点击事件

Table tr and td have weird click events

javascript

jquery

html

jquery-click-event