entityMap|blocks|key|a6l31|text|您可以确保所单击的td不在包含按钮的列中。使用:not，可以确保匹配的元素不匹配特定的选择器；使用:nth-child，可以将容器中的第三个td指定为要排除的那个：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|53uh2|​|ef2p4|$('#my_table+tbody').on('click',+'tr+td:not(:nth-child(3))',+function()+{
++console.log('click+registered');
});|code-block|syntax|javascript|6l2io|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table+id="my_table">
++<tr>
++++<td>td+1</td>
++++<td>td+2</td>
++++<td><button>button</button></td>
++</tr>
</table>|8cv3n|aaieq^0|9|2|N|4|1D|A|1Y|2|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@$A|S|B|T|C|D]|$A|U|B|V|C|D]|$A|W|B|X|C|D]|$A|Y|B|Z|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|10|9|@]|E|@]|F|$]]|$2|I|4|J|6|K|8|11|9|@]|E|@]|F|$L|M]]|$2|N|4|O|6|K|8|12|9|@]|E|@]|F|$L|M]]|$2|P|4|H|6|7|8|13|9|@]|E|@]|F|$]]|$2|Q|4|-4|6|7|8|14|9|@]|E|@]|F|$]]]]

<p>You might make sure that the <code>td</code> being clicked on is not in the column with the buttons. With <code>:not</code>, you can ensure that the matched element doesn't match a particular selector, and with <code>:nth-child</code>, you can specify the 3rd <code>td</code> in its container as the one to be excluded:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#my_table tbody').on('click', 'tr td:not(:nth-child(3))', function() {
  console.log('click registered');
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;table id="my_table"&gt;
  &lt;tr&gt;
    &lt;td&gt;td 1&lt;/td&gt;
    &lt;td&gt;td 2&lt;/td&gt;
    &lt;td&gt;&lt;button&gt;button&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation|1|https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation|blocks|key|5j5l6|text|您正在体验一个名为Event+Propagation的DOM特性。|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|6fopg|您要做的是通过在<td>点击的处理程序中调用Event.stopPropagation()来防止这种情况发生|style|CODE|7c296|要使用jQuery事件处理程序停止传播，只需在td单击处理程序的最后一行返回false即可。|8svh^0|9|H|0|0|8|4|M|N|1|0|0^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|3|4|5|6|$7|A]]]|B|@$C|D|E|F|2|G|H|T|I|@]|J|@$K|U|L|V|C|W]]|6|$]]|$C|M|E|N|2|G|H|X|I|@$K|Y|L|Z|O|P]]|J|@$K|10|L|11|C|12]]|6|$]]|$C|Q|E|R|2|G|H|13|I|@]|J|@]|6|$]]|$C|S|E|-4|2|G|H|14|I|@]|J|@]|6|$]]]]

<p>You are experiencing a feature of the DOM called <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation" rel="nofollow noreferrer">Event Propagation</a>.</p>

<p>What you want to do is prevent this from occurring by calling <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation" rel="nofollow noreferrer">Event.stopPropagation()</a> in the handlers for your <code>&lt;td&gt;</code> clicks</p>

<p>To stop propagation with a jQuery event handler, simply return false on the last line of your td click handlers.</p>


entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation|blocks|key|1o3uq|text|您可以在单击按钮时使用Event​.stop​Propagation()：|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|bvb7j|​|cmjcf|$('#my_table+tbody').on(+'click',+'tr',+function+()+{
++$(this).toggleClass('selected');
}+);
$('#my_table+tbody').on(+'click',+'button',+function+(e)+{
++e.stopPropagation();
});|code-block|syntax|javascript|fhn2l|.selected{
++background-color:+red;
}|7q4jm|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table+id="my_table">
++<thead>
++++<th>Item</th>
++++<th>Amount</th>
++++<th>Action</th>
++</thead>
++<tbody>
++<tr>
++++<td>Apple</td>
++++<td>10</td>
++++<td><button>[Buy]</button><button>[Delete]</button></td>
++</tr>
++<tr>
++++<td>Banana</td>
++++<td>5</td>
++++<td><button>[Buy]</button><button>[Delete]</button></td>
++</tr>
++<tr>
++++<td>Orange</td>
++++<td>14</td>
++++<td><button>[Buy]</button><button>[Delete]</button></td>
++</tr>
++</tbody>
</table>|33d15|8h503^0|B|P|B|P|0|0|0|0|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|Z|G|@$H|10|I|11|J|K]]|L|@$H|12|I|13|A|14]]|6|$]]|$A|M|C|N|2|E|F|15|G|@]|L|@]|6|$]]|$A|O|C|P|2|Q|F|16|G|@]|L|@]|6|$R|S]]|$A|T|C|U|2|Q|F|17|G|@]|L|@]|6|$R|S]]|$A|V|C|W|2|Q|F|18|G|@]|L|@]|6|$R|S]]|$A|X|C|N|2|E|F|19|G|@]|L|@]|6|$]]|$A|Y|C|-4|2|E|F|1A|G|@]|L|@]|6|$]]]]

<p>You can use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation" rel="nofollow noreferrer"><code>Event​.stop​Propagation()</code></a> on button click:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#my_table tbody').on( 'click', 'tr', function () {
  $(this).toggleClass('selected');
} );
$('#my_table tbody').on( 'click', 'button', function (e) {
  e.stopPropagation();
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.selected{
  background-color: red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;table id="my_table"&gt;
  &lt;thead&gt;
    &lt;th&gt;Item&lt;/th&gt;
    &lt;th&gt;Amount&lt;/th&gt;
    &lt;th&gt;Action&lt;/th&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
    &lt;td&gt;Apple&lt;/td&gt;
    &lt;td&gt;10&lt;/td&gt;
    &lt;td&gt;&lt;button&gt;[Buy]&lt;/button&gt;&lt;button&gt;[Delete]&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Banana&lt;/td&gt;
    &lt;td&gt;5&lt;/td&gt;
    &lt;td&gt;&lt;button&gt;[Buy]&lt;/button&gt;&lt;button&gt;[Delete]&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Orange&lt;/td&gt;
    &lt;td&gt;14&lt;/td&gt;
    &lt;td&gt;&lt;button&gt;[Buy]&lt;/button&gt;&lt;button&gt;[Delete]&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|h4m7|text|可以对按钮onclick事件使用stopPropagation()或preventDefault()。这将防止对按钮的父元素(td、tr、table等)的事件bubling。假设您的按钮类为'row-button‘，下面是一个示例代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3t475|$('.row-button').on('click',+function(event)){
++++event.stopPropagation();
++++//Do+what+are+intended+upon+button+click.
}|code-block|syntax|javascript|6j6t8^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|J|9|@]|A|@]|B|$F|G]]|$2|H|4|-4|6|7|8|K|9|@]|A|@]|B|$]]]]

<p>You can use stopPropagation() or preventDefault() on buttons onclick event. This will prevent event bubling to parent elements of button (td, tr, table and so on). Assuming your buttons class as 'row-button' following is a sample code:</p>

<pre><code>$('.row-button').on('click', function(event)){
    event.stopPropagation();
    //Do what are intended upon button click.
}
</code></pre>


<p>When you click on a table row it adds a class that changes it's appearance to reflect it's selected.</p>

<pre><code>    $('#my_table tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );
</code></pre>

<p>However, I also have some buttons in a column that let you do things specific to the row:</p>

<pre><code>Item    Amount    Action
--------------------------------
Apple   10        [Buy] [Delete]
Banana  5         [Buy] [Delete]
Orange  14        [Buy] [Delete]
</code></pre>

<p>When I click one of the individual buttons, it also triggers the table row '.selected' class to be added, but I don't want this to occur when clicking buttons.</p>


Selecting table rows with jquery, but also selecting rows when clicking button, how do I prevent this?

 当您单击一个表行时，它会添加一个类来更改它的外观，以反映它被选中的情况。     $('#my_table tbody').on( 'click', 'tr', function () {        $(this).toggleClass('selected');    } ); 但是，我在一个列中也有一些按钮，...

问使用jquery选择表行，但在单击按钮时也选择行，如何防止这种情况？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery选择表行，但在单击按钮时也选择行，如何防止这种情况？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery选择表行，但在单击按钮时也选择行，如何防止这种情况？
EN