使用jQuery创建可单击的行并排除子元素

Question

＆lt; p＆gt;我有一个表格，其中包含我想要点击的行，但是我的一个列中还有一个按钮，按下时应该执行其他操作。＆lt; / p＆gt; ＆LT; p为H. HTML：其中/ p为H. ＆LT;预＆GT;＆LT;代码＆GT;＆LT;表＆gt;     ＆lt; tr data-url =＆＃34; link.html＆＃34;＆gt;         ＆lt; td＆gt;某些文字值＆lt;输入类型=＆＃34;按钮＆＃34;值=＆＃34;提交＆＃34;的onclick =＆＃34; otherFunction（）＆＃34;＆GT;＆LT; / TD＆GT;     ＆LT; / TR＆GT;     ＆lt; tr data-url =＆＃34; link2.html＆＃34;＆gt;         ＆lt; td＆gt;某些文字值＆lt;输入类型=＆＃34;按钮＆＃34;值=＆＃34;提交＆＃34;的onclick =＆＃34; otherFunction（）＆＃34;＆GT;＆LT; / TD＆GT;     ＆LT; / TR＆GT;     ＆lt; tr data-url =＆＃34; link3.html＆＃34;＆gt;         ＆lt; td＆gt;某些文字值＆lt;输入类型=＆＃34;按钮＆＃34;值=＆＃34;提交＆＃34;的onclick =＆＃34; otherFunction（）＆＃34;＆GT;＆LT; / TD＆GT;     ＆LT; / TR＆GT; ＆LT; /表＆gt; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆LT; p为H. jQuery的：其中/ p为H. ＆lt; pre＆gt;＆lt; code＆gt; $（document）.ready（function（）{     $（＆＃39;表tr：not（输入）＆＃39;）。click（function（）{         var href = $（this）.attr（＆＃34; data-url＆＃34;）;         if（href）{             //console.log(' remirect to：＆＃39; + href）;             window.location = href;         }     }）; }）; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;目前，当我点击按钮时，尽管jQuery选择器不包含任何输入，但页面仍然是重定向的。我使用的是＆lt; code＆gt;：不是＆lt; / code＆gt;不正确＆LT; / p为H.

Answer 1

您可以通过查看event.target属性

来检查点击处理程序是否单击了该按钮

＆＃13;

＆＃13;

$(document).ready(function() {
  $('table tr').click(function(e) {
    if ($(e.target).is(':button')) {
      snippet.log('button clicked')
      return;
    }

    snippet.log('row clicked');
    var href = $(this).attr("data-url");
    if (href) {
      //console.log('redirect to:' + href);
      window.location = href;
    }
  });
});

＆＃13;

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr data-url="link.html">
    <td>Some Text Value
      <input type="button" value="Submit" onclick="otherFunction()">
    </td>
  </tr>
  <tr data-url="link2.html">
    <td>Some Text Value
      <input type="button" value="Submit" onclick="otherFunction()">
    </td>
  </tr>
  <tr data-url="link3.html">
    <td>Some Text Value
      <input type="button" value="Submit" onclick="otherFunction()">
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您必须查看传递给target函数的event的{​​{1}}。

这是一个有效的例子：

＆＃13;

＆＃13;

click

＆＃13;

$(document).ready(function(){
  $(".clickablerow").click(function(event) {
    if(event.target.tagName != "INPUT"){
      var href = $(this).attr("data-url");
      if(href) {
        //console.log('redirect to:' + href);
        window.location = href;
      }
    }
  });
});

function otherFunction() {
  alert("other function");
}

＆＃13;

＆＃13;

＆＃13;