我遇到一个问题,表格行有单击事件,但是当用户单击表格行单元格之一中的链接时,我不希望触发该行的单击事件。
想象一种情况,表格单元格内有一个链接,通常单击任何表格行的空白区域(例如不是链接)会导致一些操作,例如 Accordion /行折叠和展开。
发生的情况是下面的点击事件被触发,然后链接被跟随(预期的操作)。
我需要做的是排除点击 a 中的 a href 来触发 tr.title-row 点击操作(例如,不应触发警报,而应遵循链接)。
这段 jQuery 代码正在为标题行设置点击事件(例如该行中的所有 TH、任何单元格等)
$(document).ready(function() {
$(".report tr.title-row").click(function() {
alert('I am firing!');
});
以下是适用于的相同 HTML:
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="report">
<tbody>
<tr class="title-row">
<th width="340"><span class="title">Test</span>
</th>
<th width="130" class="center-cell">Test</th>
<th width="90" class="status"></th>
<th></th>
<th width="160"> <a target="_self" href="http://www.google.com" class="link-class sub-class">I am triggering the TR click event</a>
</th>
</tr>
<tr>
<td class="sub-row" colspan="5">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><strong>SubRow</strong>
</td>
<td width="90" class="status"><span class="sub">Sub</span>
</td>
<td width="120"></td>
<td width="160"><a title="Continue" href="http://www.yahoo.com">Something</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
最佳答案
可以查看target
单击该行的,仅在目标不是 <a>
时才运行代码标签:
$(".report tr.title-row").click(function(event) {
if( ! $(event.target).is('a') ){
alert('I only fire when A not clicked!');
}
});
关于jquery - 如何从父项的点击事件中排除子项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14177943/