javascript - 当存在子元素时，div 上的“onClick”事件不会发生

Question

我正在为自己建立一个新网站，看起来像这样..

HTML

<div id="row1">
<div class="orange" onClick="itemLoad()">
<img src="img/game/wacky.jpg" width="140" />
<p><strong>A Day At The Races (2014)</strong><br>
3 x 8-bit instruments</p>
</div>

<div class="blue" onClick="itemLoad()">
<img src="img/game/dott.jpg" width="140" />
<p><strong>Back to the Mansion! (2013)</strong><br />
fl, ob, cl, bsn, xyl, vibes, vln, vla, vlc.</p>
</div>

.... etc etc etc.

CSS(除背景颜色外，所有框都具有相同的 CSS)

.orange{
width:150px;
height:150px;
background:#F90;    
display:inline-block;
margin:10px;
cursor:pointer;
box-shadow:#CCC 4px 4px 4px;
border-radius: 10px;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
line-height:1.5;
}

基本上，当您点击其中一个框时，它会显示一个内容 DIV，根据它所在的行向您介绍该音乐。

JQuery

function itemLoad(){
if($(event.target).parent().is("#row1")){
    $("#row1content").fadeIn("slow");
}else if($(event.target).parent().is("#row2")){
    $("#row2content").fadeIn("slow");
}
}

当方框为空时，此功能绝对可以正常工作，但当方框内有内容时，如您在图片中所见，该功能仅在我单击填充时运行。我以前从来没有遇到过这个问题。任何帮助将不胜感激:)

Answer 1

event.target 是被点击的元素，当你点击一个子元素时，这就是 event.target 是什么，所以它不会始终如一地给你正确的元素，或正确的父元素，因为 event.target 不引用事件处理程序绑定(bind)到的元素，而是引用事件起源的元素。

此外，您依赖于全局事件，它不是跨浏览器的。

您要做的是使用适当的事件处理程序，this

$('.blue, .orange').on('click', function() {
    if ( $(this).parent().is("#row1") ){
        $("#row1content").fadeIn("slow");
    } else if ( $(this).parent().is("#row2") ){
        $("#row2content").fadeIn("slow");
    }
});

应该注意的是，有一种最明确的更动态的方法可以做到这一点，为所有目标元素赋予相同的类，然后根据索引或 DOM 中的位置淡化，而不是根据父 ID 来定位每个元素.