イベントに関する質問
吉見隆
イベントに関する質問があります。教えていただけるとありがたいです。
前回の記事でも触れたのですが、テーブルの行タグ <tr> にonMouseOver など
のイベントハンドラを記述しておくと、event.srcElement あるいは
event.target は <tr> ではなく、マウスがあった場所の <td> になります。
イベントハンドラが記述されたタグ<tr>を得るためには、そこから
parentNode で一階層上に遡らなければなりません。これは、IEでもNNでも同
じでした。
一般に、タグが階層構造になっていて、イベントハンドラが外側のタグに記述
されている場合、event.srcElement あるいは event.target は最も内側の要
素が返ってくるものと決まっているのでしょうか。
あるいはこれは<table>あるいは<tr>特有の仕様なのでしょうか。
--
吉見隆 mailto:tak-y...@aist.go.jp
ku...@gssm.otsuka.tsukuba.ac.jp
tak-y...@aist.go.jpさん:
> イベントに関する質問があります。教えていただけるとありがたいです。
質問ですが、これは読まれましたか。
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-basic
実のところ実際のブラウザがこの通りかというのはまた別の問題として
あるわけですが…
いちおう、これが標準なわけで 久野
T. Sugita
In message news:bcgi4u$jur$1...@xfire.aist.go.jp
"吉見隆" <tak-y...@aist.go.jp> wrote ...
> イベントハンドラが記述されたタグ<tr>を得るためには、そこから
> parentNode で一階層上に遡らなければなりません。これは、IEでもNNでも同
> じでした。
こちらの記事は届いてなかったでしょうか？
(じつはサーバーの調子が悪かったので、すごく不安だったのですが・・・)
news:bc4l66$8q9$1...@news01.iij4u.or.jp
Phoenix 0.3 の場合、TDに記述したテキスト("#text")でもイベント
が発生しているみたいで、一階層上と限定するのは危なさそうです。
# 今の Gecko は確認してないです。
> 一般に、タグが階層構造になっていて、イベントハンドラが外側のタグに記述
> されている場合、event.srcElement あるいは event.target は最も内側の要
> 素が返ってくるものと決まっているのでしょうか。
IEのイベントに関しては、以下に説明があります。
http://www.microsoft.com/japan/msdn/library/ja/jpisdk/dhtml/doc_object/event_model.asp?frame=true
IE限定ですが、確認用のプログラムを書いてみました。
# absolute はいいかげん(あってるかわからない)ですが・・・
## left, top のデフォルトって、利用しても良いのかどうか。
<html>
<head>
<title>IE event-bubble</title>
<style>
.indt {
margin-left: 2em;
position: absolute;
}
</style>
<script>
function debug(w) {
this.w = w;
return this;
}
debug.prototype.vaprint = function (args) {
if (typeof(this.w.self) != "object") return;
var doc = this.w.document;
for (var i=0; i < args.length; i++)
doc.write(args[i])
doc.body.scrollTop = doc.body.scrollHeight;
}
debug.prototype.print = function () {
if (typeof(this.w.self) != "object") return;
this.vaprint(arguments);
}
debug.prototype.println = function () {
if (typeof(this.w.self) != "object") return;
this.vaprint(arguments);
this.w.document.writeln("<br>");
}
//
var dbg = null;
//
function init() {
dbg = new debug(dbgwin);
}
function prop(obj) {
var s = "<";
s += obj.nodeName;
s += " id='" + obj.id + "'";
s += " left=" + obj.offsetLeft;
s += " top=" + obj.offsetTop;
s += ">";
return s;
}
function cancel() { event.cancelBubble = true; }
function L1() { dbg.println("L1("+prop(event.srcElement)+")"); }
function L2() { dbg.println("L2("+prop(event.srcElement)+")"); }
function L3() { dbg.println("L3("+prop(event.srcElement)+")"); }
function sep() { dbg.println("--"); }
</script>
</head>
<body onload="init()">
<p>
<div id="a1" class="indt" onmouseover="L1()" onmouseout="sep()"
style="background:cyan; width:200px; height:50px; top:60%">a
<div id="b1" class="indt" onmouseover="L2()"
style="background:yellow; width:200px; height:40px">b
<div id="c1" class="indt" onmouseover="L3()"
style="background:red; width:200px; height:30px">c
<div id="d1" class="indt"
style="background:green; width:200px; height:20px">d</div>
</div>
</div>
</div>
<p>
<div id="a2" class="indt" onmouseover="L1()" onmouseout="sep()"
style="background:cyan; width:200px; height:50px; top:80%">a
<div id="b2" class="indt" onmouseover="L2(); cancel()"
style="background:yellow; width:200px; height:40px">b
<div id="c2" class="indt" onmouseover="L3()"
style="background:red; width:200px; height:30px">c
<div id="d2" class="indt"
style="background:green; width:200px; height:20px">d</div>
</div>
</div>
</div>
<p>
<iframe name="dbgwin" style="width:100%; height:50%"></iframe>
</body>
</html>
T. Sugita
In message <bch4oh$t6e$1...@news00.iij4u.or.jp>
T. Sugita wrote:
>>イベントハンドラが記述されたタグ<tr>を得るためには、そこから
>>parentNode で一階層上に遡らなければなりません。これは、IEでもNNでも同
>>じでした。
> Phoenix 0.3 の場合、TDに記述したテキスト("#text")でもイベント
> が発生しているみたいで、一階層上と限定するのは危なさそうです。
NN7を入れてみたところ、同様でした。
久野さんが示されてたW3Cを見てきたところ、バブリングされた
場合でも、currentTarget に処理中のものが入っているようなので、
NN7の場合はこれを使えば問題なさそうです。
// NN7
row = _event.currentTarget;
ただ、IEの場合どうするかという問題があるので、半共通化するので
あれば、やはり
// IE
row = _event.srcElement;
while (row.nodeName != "TR") {
if (!(row = row.parentElement))
return;
}
とかして、遡るのでも良いのかもしれません。