javascript - JQuery 使图像元素在可点击的 div 中不活动

Question

我有一个 div 类，单击它会切换动画。在该 div(具有相同类名的数字之一)内有许多 img 图标。我想保持对 div 的点击，而不是对 div 内的图像的点击 - 最终图像在点击时会触发另一个功能。

到目前为止我的 JQuery 代码如下:

$(document).on('click', '.list_body', function() {
    $(this).nextAll('.list_info:first').slideToggle(500);
    return false;
});

$('.list_body').on('click', 'img', function(e){
    e.preventDefault();
    alert("Test");
});

var ls="<div class='list_body'><div class='lister'><img src='"+path+stat1+"' /><img src='"+path+stat2+"' /><img src='"+path+stat3+"' /><img src='"+path+stat4+"' /><img src='"+path+stat5+"' /></div><div class='lister'>"+split_stats[5]+" "+split_stats[6]+" "+split_stats[7]+"<br />["+split_stats[12]+"]"+"</div><div class='lister'>"+split_stats[13]+"</div><div class='lister'><a href='javascript:void(0);' class='lister_a'>View Appointment &amp; Actions</a></div></div>"

ls+="<div class='list_info'>";
ls+="<ul class='add1'><li>"+split_stats[8]+"</li><li>"+split_stats[9]+"</li><li>"+split_stats[10]+"</li><li>"+split_stats[11]+"</li><li>"+split_stats[12]+"</li></ul>";
ls+="<ul class='add2'><li><strong>Tel: </strong>"+split_stats[14]+"</li><li><strong>Mobile: </strong>"+split_stats[15]+"</li><li><strong>Email: </strong>"+split_stats[16]+"</li><li><strong>Job ID: </strong>"+split_stats[17]+"</li></ul>";
ls+="<div class='bottom_links' data-job_id='"+split_stats[17]+"'><div class='lister'><a href='javascript:void(0);' data-ref1='1' data-job_id='"+split_stats[17]+"'>Print Files</a></div><div class='lister' data-ref1='2'><a href='javascript:void(0);' data-ref1='2' data-job_id='"+split_stats[17]+"'>Add Message</a></div><div class='lister'><a href='javascript:void(0);' data-ref1='3' data-job_id='"+split_stats[17]+"'>Add Tracking No.</a></div><div class='lister'><a href='javascript:void(0);' data-ref1='4' data-job_id='"+split_stats[17]+"'>///</a></div></div>";
ls+="</div>";

$(ls).appendTo('.list_holder');
$('.list_info').hide();

Answer 1

只需为您的图像添加以下内容:

$('.list_body').on('click', 'img', function(  e  ){
    e.preventDefault();

    // your img functions stuff...

});

e.preventDefault(); 将有助于防止点击事件 - 从图像冒泡到下面的父元素 - 触发不需要的功能。

了解更多: http://api.jquery.com/event.preventDefault/