Question

我在<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')};

当用户点击＆＃39;第3列＆＃39;时，会触发这两个事件，但我只想触发tdclick()。

Answer 1

你需要做的是在点击一个孩子时停止传播父事件，在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>

Answer 2

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

的参数

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用＆＃34;事件＆＃34;调用所有javascript事件第一个参数中的对象。这个对象有一个＆＃34; stopPropagation＆＃34;方法，用于阻止在更高层次的DOM节点上触发相同事件的侦听器。

有一个例子就像你在MDN的例子：https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation

在您的示例中，您可以停止传播＆＃34; tdclick＆＃34;：

＆＃13;

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

＆＃13;

Answer 4

您可以在函数输入中使用el并将变量传递给它，无论您想调用它的哪个位置。

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function colorChanger(el){
    el.style.backgroundColor = '#007d00';
}

</script>
</head>
<body>
  <table>
    <tr onclick="colorChanger(this);">
      <td onclick="colorChanger(this);">click me</td>
    </tr>
  </table>
</body>
</html>

Answer 5

我喜欢这种方法：

<td style='cursor: pointer;' tdclick(event);'></td>

然后是JS

<script>
    tdclick(){
     //do something...
    }
</script>

活动onclick和

5 个答案: