仅当我单击表格行而不是单击表格行元素时如何触发事件答案

【问题标题】：How to trigger event only when i click table row but not when i click table row element仅当我单击表格行而不是单击表格行元素时如何触发事件
【发布时间】：2018-02-08 13:53:27
【问题描述】：

在这里，我正在向我单击的行添加一个类。我面临的问题是我在表格中有一个文本框和下拉字段。但是当我点击文本框或下拉菜单输入值时，该功能被触发。我真正想做的是，当我点击行时，应该添加类，当我点击表格行内的元素时，不应该添加类。

我该怎么做？

这就是我所做的。

<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>

【问题讨论】：

当您单击表格行中的任何内容时，您实际上是在单击表格行。有很多方法可以满足您的要求，但是为什么您只想在单击 tr 元素而不添加其他内容时添加该类？我看到你正在添加选择的课程......这门课的目的是什么？突出显示该行？用户什么时候只选择行而里面什么都没有？

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

这会阻止下拉列表被选中吗？
@floor ，不，不是，请检查添加的sn-p
我知道您可以选择菜单，但如果我要在菜单中添加点击事件或更改时，这仍然有效吗？
@floor ，它只会忽略 td 内元素的点击