事件onclick <td>和<tr>

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (532)

我在a <td><tr>元素的表中有一个onclick事件。我需要当用户点击特定列(<td>)时,<tr>不会触发事件,只触发事件<td>

怎么做 ?

示例:

HTML:

<tr onclick='trclick();'>
<td>Column 1</td>
<td>Column 2</td>
<td onclick='tdclick();'>Column 3</td>
</tr>

JS:

function trclick(){console.log('tr clicked')};
function tdclick(){console.log('td clicked')};

当用户点击“第3列”时,两个事件都会被触发,但我只想tdclick()触发。

提问于
用户回答回答于

你需要做的是在点击一个孩子时停止父事件的传播,这在jQuery中很容易完成,但天真地你需要做更多的工作:

function trclick(){
    console.log('tr clicked')
};

function tdclick(e){ 
    if (!e) var e = window.event;                // Get the window event
    e.cancelBubble = true;                       // IE Stop propagation
    if (e.stopPropagation) e.stopPropagation();  // Other Broswers
    console.log('td clicked');
};  

注意,对于Firefox,您需要传递一个event参数:

<td onclick='tdclick(event)'>Column 3</td>
用户回答回答于

您需要停止事件的传播。要访问事件对象,您需要将其用作函数的参数tdclick

function trclick(){console.log('tr clicked')};

function tdclick(event){
    console.log('td clicked'); 
    event.stopPropagation()
};

<table><tbody>
<tr onclick='trclick();'>
<td>Column 1</td>
<td>Column 2</td>
<td onclick='tdclick(event);'>Column 3</td>
</tr>
</tbody></table>

扫码关注云+社区

领取腾讯云代金券