如何僅在單擊表格行時觸發事件，而在單擊表格行元素時不觸發事件

Question

在這里，我向單擊的行添加一個類。 我面臨的問題是我在表格中有一個文本框和下拉字段。 但是，當我單擊文本框或下拉菜單以輸入值時，該函數將被觸發。 我真正想做的是，當我單擊該行時應添加該類，當我單擊表行內的元素時不應添加該類。

我怎樣才能做到這一點？

這是我所做的。

<script>
var tabRow = $('.extab tbody tr');    
    tabRow.on('click',function(){
        $(this).addClass('selected');
    })
</script>



<table class="extab">
<tr><th>1</th><th>2</th><th>2</th></tr>
<tbody>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr>
    <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> 
</tbody>
</table>

Answer 1

檢查單擊的是單元格還是帶有事件目標的輸入

 var taBody = $('.extab tbody') taBody.on('click', 'tr', function (evt) { if($(evt.target).is('td')) { $(this).toggleClass('selected'); } }) 

 .selected{ background: red; } td{ padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="extab"> <tr><th>1</th><th>2</th><th>2</th></tr> <tbody> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> </tbody> </table> 

Answer 2

為了更好地說明，我在td上添加了填充。 這可以根據您的需要很好地工作。

 var tabRow = $('.extab tbody tr'); tabRow.on('click',function(){ $(this).addClass('selected'); }) $('.extab tbody tr td *').click(function(e){ e.stopPropagation(); }); 

 .selected{ background: red; } td{ padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="extab"> <tr><th>1</th><th>2</th><th>2</th></tr> <tbody> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> </tbody> </table> 

Answer 3

您可以像這樣：

$('.extab tbody tr td *').click(function(e){ e.stopPropagation(); });

---

 var tabRow = $('.extab tbody tr'); tabRow.on('click',function(){ console.log('row clicked'); $(this).addClass('selected'); }); $('.extab tbody tr td *').click(function(e){ e.stopPropagation(); }); 

 tr td { padding: 5px; background-color : red; } tr.selected td { background-color : blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="extab"> <tr><th>1</th><th>2</th><th>2</th></tr> <tbody> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> <tr><td><input type="text"></td><td><select><option val="1">DSD</option><option val="2">FSJ</option><option val="3">MSD</option></select></td><td><input type="text"></td></tr> </tbody> </table>