mk-featured-kits という div id の li 要素を対象とする関数があります。これはすべて完璧に機能します。
(function() {
var myNode = document.getElementById('mk-featured-kits');
myNode.addEventListener("mouseover", function(e) {
console.log(e);
if (e.target.tagName === 'LI') {
// all happens here
}
})();
コンソール ログを表示するために Chrome を使用しています。これにより、LI のパスとして e.target.tagName を使用できます。
IE 8以降はaddEventListenerイベントを読み取らないため、これ（コードベロー）を使用して機能を確認しています。問題は、この手法を使用して LI にアクセスできないことです: e.target.tagName === 'LI' イベントは myNode を tagName === DIV としてしか認識しないためです。
(function() {
var myNode = document.getElementById('mk-featured-kits');
if (myNode.addEventListener) { // all browsers except IE before version 9
myNode.addEventListener ("mouseover", function () {myEvent (myNode)}, false);
} else {
if (myNode.attachEvent) { // IE before version 9
myNode.attachEvent ("onmouseover", function () {myEvent (myNode)});
}
}
function myEvent(myNode) {
console.log(myNode);
if (myNode.target.tagName === 'LI') {
// all happens here
}
})();
最初のスクリプトで行ったように、2 番目のスクリプトの手法を使用して LI にアクセスするにはどうすればよいですか。前もって感謝します。
これはhtmlコードです：
<div class="mk-column">
`<div id="mk-featured-kits">
<ul>
<li id="kit01"><a href="#">Link 01</a></li>
<li id="kit02"><a href="#">Link 02</a></li>
<li id="kit03"><a href="#">Link 03</a></li>
<li id="kit04"><a href="#">Link 04</a></li>
<li id="kit05"><a href="#">Link 05</a></li>
<li id="kit06"><a href="#">Link 06</a></li>
<li id="kit07"><a href="#">Link 07</a></li>
<li id="kit08"><a href="#">Link 08 </a></li>
</ul>
</div>`
`