Javascript <td> 和 <tr> 上的事件 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32404185/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Event onclick on <td> and <tr>
提问by delphirules
I have an onclick event in a table both on a <td>and <tr>elements. I need when the user clicks on the specific column (<td>), the <tr>event won't be triggered, only the <td>one.
我在 a<td>和<tr>元素上的表中有一个 onclick 事件。我需要当用户单击特定列 ( <td>) 时，<tr>不会触发该事件，只会触发该事件<td>。
How to do it ?
怎么做 ？
Example :
例子 ：
HTML :
HTML :
<tr onclick='trclick();'>
<td>Column 1</td>
<td>Column 2</td>
<td onclick='tdclick();'>Column 3</td>
</tr>
JS :
JS：
function trclick(){console.log('tr clicked')};
function tdclick(){console.log('td clicked')};
When the user clicks on 'Column 3', both events are triggered, but i want only tdclick()to be triggered.
当用户点击“第 3 列”时，两个事件都会被触发，但我只想tdclick()被触发。
回答by Spencer Wieczorek
What you need to do is to stop the propagation of the parent event when a child is clicked, it's easy done in jQuery, but naively you need to do a little more work:
您需要做的是在单击子项时停止父事件的传播，这在 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');
};
Note, for Firefox you need to pass a eventparameter:
请注意，对于 Firefox，您需要传递一个event参数：
<td onclick='tdclick(event)'>Column 3</td>
回答by Hacketo
You need to stop the propagation of the event.
to access the event object you need to use it as parameter of your function tdclick
您需要停止事件的传播。要访问您需要将其用作函数参数的事件对象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>回答by Jaison Erick
All javascript events are invoked with an "event" object in the first argument. This object have a "stopPropagation" method, which prevent listeners of the same event on higher hierarchical DOM nodes to be triggered.
所有 javascript 事件都使用第一个参数中的“事件”对象调用。这个对象有一个“stopPropagation”方法，它可以防止在更高层次的 DOM 节点上触发相同事件的侦听器。
There's an example just like yours at MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation
在 MDN 上有一个和你一样的例子：https: //developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5: _Event_Propagation
In your example, you could just stop propagation on "tdclick":
在您的示例中，您可以停止对“tdclick”的传播：
function tdclick(e){
e.stopPropagation();
console.log('td clicked')
};回答by Hello Hack
you can use el in your function input and pass the variable to it, in every where you wanna call it.
你可以在你的函数输入中使用 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>
回答by Brennan James
I like this method:
我喜欢这个方法：
<td style='cursor: pointer;' tdclick(event);'></td>
then JS
然后JS
<script>
tdclick(){
//do something...
}
</script>
