td にクリックイベントを付ける。 td 内に別の要素 (span や p など)がある場合。
|
0-0:onclickTd1(this) : 引数 this は td ここにspanがある |
|
1-0:onclickTd2(event) : 引数 event はマウスイベント ここにspanがある span とそれ以外の領域で ev.target の内容が変わる点に注意。 |
(2017/12-2022/04) 動作 : Edge99, Firefox95, Chrome96, IE11 ◎ノート ・td 内に別の要素がある場合。 1) td 内の要素 (ここでは span) をクリックした場合でも、td でも click イベントが発生します。 span のクリックイベントと td のクリックイベントの 2回発生 します。 td 内の要素に別の click イベントを付けている場合は、どちらで 処理するかに注意してください。 span のクリックイベントで処理し、td 側で処理されないように したい場合は ev.stopPropagation() でイベントの伝播を 止めるたり、ev.preventDefalut() でデフォルトの処理が 実行されないようにすることが必要です。 MDN: event.stopPropagation() MDN: Event.preventDefault() イベントの発生順にも注意。 例: 背景と上側に部品があるときに、どちらのイベントが先に発生するか？ など。 この種の話は混乱や錯覚が起こりやすいです。 必要な処理が抜け落ちたり、処理が 2重に行われたりする、など。 2) マウスイベントの場合、event.target はイベントが発生した要素 になります。 常に td ではありません。 span をクリックすれば event.target は HTMLSpanElement になります。 単純なプログラム以外では event.target でイベント発生元の要素を 取り出す処理をしない方が良いです。 td を見て処理したい場合は、event を引数にせず、td を引数で 渡します。 <td onclick="onclickTd(this)"> //this は td になります。