$(document).ready(function (){
$(".closebox").click(function(){
$('#uploadbox').hide();
$('#lightbox').hide();
$('#deniedbox').hide();
$('#confirm_delete_box').hide();
}).children().click(function(e) {
console.log(e.target.id); // I get "previewHolder" and "filePhoto" in the console
if($(e.target).is('#previewHolder')){
console.log('yes');
return false;
}else{
console.log('nope');
return false;
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="uploadbox">
<tr>
<td align="center" valign="middle" style="height: 100%;" class="closebox">
<div style="background-color: white; border-radius: 8px; padding-top: 12px; display: inline-block; -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1); box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);">
<div style="margin: 20px; margin-top: 25px; margin-bottom: 25px; line-height: 6px; max-height: 800px; overflow: auto;" id="upbox">
<input type="file" name="filePhoto" value="" id="filePhoto" accept=".jpg,.jpeg,.png,.gif" data-errormsg="Something went wrong" style="display: none;">
<div id="upload_title_afterview" style="font-size: 22px; padding-bottom: 20px; padding-top: 6px; color: #404040; text-align: left; max-width: 500px; line-height: 26px; display: none;"></div>
<img src="<?php echo $domain; ?>/style/upload_background.jpg" id="previewHolder" style="max-width: 498px; max-height: 100%; margin-bottom: 10px; border: solid 1px #C0C0C0; cursor: pointer;" onclick="choose_image();"/>
<br>
<div id="upload_error" style="width: 100%; text-align: left; color: #FF6600; font-size: 18px; margin-top: 15px; margin-bottom: 15px; display: none;">
</div>
</div>
</div>
</td>
<tr>
</table>我从jQuery检查目标是否为链接中得到了这个，在有人将其标记为重复之前，这些解决方案在我的特定情况下都不起作用。
我需要找出单击了#previewHolder，并且使用此代码，这两个条件都为真，因此我在控制台中nope并yes。我猜是因为.closebox有多个孩子。我该如何解决这个问题？
这是整个想法： 当用户点击 .closebox 时，我希望隐藏所有div，除了他点击子元素，但我希望在子元素 #previewHolder 时触发一个函数
如果您希望它在单击#previewHolder时不会关闭.closebox，则只需执行以下操作：
$('#previewHolder').click(function(e) {
e.stopPropagation();
//add any code you want here
});
代码e.stopPropagation();阻止.closebox事件触发
click(function(e){
if($("#previewHolder").is(e.target)){
console.log("yes");
}
else {
console.log("nop");
}
});
"#previewHolder"只是一个字符串。
请浏览下面的代码，看看这是否是你想要的。单击每个子元素并查看行为。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".childbox").click(function(){
if($(this).attr("id")=="previewHolder"){
previewHolderClick()
}
else{
$(".childbox").hide();
$(this).show();
}
});
function previewHolderClick(){
alert("previewHolder clicked");
}
});
</script>
</head>
<body>
<div class="closebox" style="width:200px; height:200px; background:yellow">
<div class="childbox">Child 1</div><br>
<div class="childbox">Child 2</div><br>
<div class="childbox" id="previewHolder">previewHolder<div>
</div>
</body>
</html>