[英]jQuery - check if target is specific div
$(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 check if target is link得到这个,在有人将其标记为重复之前,这些解决方案都不适用于我的特定情况。
我需要找出是否点击了#previewHolder
并且使用此代码,两个条件都为真,所以我在控制台中得到nope
和yes
。 我猜是因为.closebox
有多个孩子。 我该如何解决这个问题?
这就是整个想法:当用户单击 .closebox 时,除了单击子元素外,我希望隐藏所有 div,但是当子元素为 #previewHolder 时,我希望触发一个函数
click(function(e){
if($("#previewHolder").is(e.target)){
console.log("yes");
}
else {
console.log("nop");
}
});
"#previewHolder"
只是一个字符串。
如果您想要它以便.closebox
在单击#previewHolder
时不会关闭,您只需执行以下操作:
$('#previewHolder').click(function(e) {
e.stopPropagation();
//add any code you want here
});
代码e.stopPropagation();
停止触发.closebox
事件
请仔细阅读以下代码,看看这是否是您想要的。 单击每个子元素并查看行为。
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.