[解決済み] <td>と<tr>をクリックしたときのイベント

質問

テーブルの onclick イベントを <td> と <tr> 要素を使用します。ユーザーが特定の列をクリックしたときに ( <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')};

ユーザーが 'Column 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>