＆＃39;的onClick＆＃39;当存在子元素时，div上的事件不会发生

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不引用事件处理程序绑定的元素，而是引用事件源自的元素。

此外，您依赖的是全局event，这不是跨浏览器。

您要做的是使用正确的事件处理程序和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定位每个元素

Answer 2

这就是我的想法：）

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