blocks|key|4470490|text|您需要做的是在单击子事件时停止父事件的传播，这在jQuery中很容易完成，但是您需要做更多的工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4470491|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');
};++|code-block|syntax|javascript|4470492|注意，对于火狐，你需要传递一个event参数：|offset|length|style|CODE|4470493|<td+onclick='tdclick(event)'>Column+3</td>|4470494|entityMap^0|0|0|F|5|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>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:</p>

<pre><code>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');
};  
</code></pre>

<p>Note, for Firefox you need to pass a <code>event</code> parameter:</p>

<pre><code>&lt;td onclick='tdclick(event)'&gt;Column 3&lt;/td&gt;
</code></pre>


blocks|key|4471111|text|所有javascript事件都是通过第一个参数中的"event“对象调用的。这个对象有一个"stopPropagation“方法，它可以防止更高层次的DOM节点上相同事件的监听器被触发。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4471112|在MDN上有一个和你一样的例子：https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation|offset|length|4471113|在您的示例中，您可以在“tdclick”上停止传播：|4471114|​|4471115|function+tdclick(e){
++e.stopPropagation();
++console.log('td+clicked')
};|code-block|syntax|javascript|4471116|4471117|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation^0|0|G|30|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|A|$M|N]]|$1|O|3|I|5|6|7|15|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<p>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.</p>

<p>There's an example just like yours at MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation</a></p>

<p>In your example, you could just stop propagation on "tdclick":</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function tdclick(e){
  e.stopPropagation();
  console.log('td clicked')
};</code></pre>
</div>
</div>
</p>


blocks|key|4471160|text|您需要停止事件的传播。要访问事件对象，需要将其用作函数tdclick的参数|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4471161|​|4471162|function+trclick(){console.log('tr+clicked')};

function+tdclick(event){
++++console.log('td+clicked');+
++++event.stopPropagation()
};|code-block|syntax|javascript|4471163|<table><tbody>
<tr+onclick='trclick();'>
<td>Column+1</td>
<td>Column+2</td>
<td+onclick='tdclick(event);'>Column+3</td>
</tr>
</tbody></table>|4471164|4471165|entityMap^0|R|7|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>You need to stop the propagation of the event.
to access the event object you need to use it as parameter of your function <code>tdclick</code></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function trclick(){console.log('tr clicked')};

function tdclick(event){
    console.log('td clicked'); 
    event.stopPropagation()
};</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;&lt;tbody&gt;
&lt;tr onclick='trclick();'&gt;
&lt;td&gt;Column 1&lt;/td&gt;
&lt;td&gt;Column 2&lt;/td&gt;
&lt;td onclick='tdclick(event);'&gt;Column 3&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4470643|text|我喜欢这个方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4470644|<td+style='cursor:+pointer;'+tdclick(event);'></td>|code-block|syntax|javascript|4470645|然后是JS|4470646|<script>
++++tdclick(){
+++++//do+something...
++++}
</script>|4470647|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I like this method:  </p>

<pre><code>&lt;td style='cursor: pointer;' tdclick(event);'&gt;&lt;/td&gt;
</code></pre>

<p>then JS</p>

<pre><code>&lt;script&gt;
    tdclick(){
     //do something...
    }
&lt;/script&gt;
</code></pre>


blocks|key|4470667|text|你可以在你的函数输入中使用el，并将变量传递给它，在你想调用它的任何地方。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4470668|<!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>|code-block|syntax|javascript|4470669|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>you can use el in your function input and pass the variable to it, in every where you wanna call it.</p>

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

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


<p>I have an onclick event in a table both on a <code>&lt;td&gt;</code> and <code>&lt;tr&gt;</code> elements. I need when the user clicks on the specific column (<code>&lt;td&gt;</code>), the <code>&lt;tr&gt;</code> event won't be triggered, only the <code>&lt;td&gt;</code> one.</p>

<p>How to do it ?</p>

<p>Example :</p>

<p>HTML :</p>

<pre><code>&lt;tr onclick='trclick();'&gt;
&lt;td&gt;Column 1&lt;/td&gt;
&lt;td&gt;Column 2&lt;/td&gt;
&lt;td onclick='tdclick();'&gt;Column 3&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>JS :</p>

<pre><code>function trclick(){console.log('tr clicked')};
function tdclick(){console.log('td clicked')};
</code></pre>

<p>When the user clicks on 'Column 3', both events are triggered, but i want only <code>tdclick()</code> to be triggered.</p>


Event onclick on <td> and <tr>

jQuery

我在表中的<td>和<tr>元素上都有一个onclick事件。我需要当用户点击特定的列(<td>)时，<tr>事件不会被触发，只有<td>事件会被触发。该怎么做呢？示例：HTML：<tr onclick='trclick();'><td>Column 1</td><td>Column 2</td><td onclick...

问<td>和<tr>上的事件onclick
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<td>和<tr>上的事件onclickEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<td>和<tr>上的事件onclick
EN