我正在使用这段代码:
$('body').click(function() {
$('.form_wrapper').hide();
});
$('.form_wrapper').click(function(event){
event.stopPropagation();
});
这个HTML:
<div class="form_wrapper">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
问题是，我有链接在div和当他们不再工作时，点击。
当前回答
切换常规和触摸设备
我在这里读了一些答案，并创建了一些代码，我使用div的函数作为弹出气泡。
$('#openPopupBubble').click(function(){
$('#popupBubble').toggle();
if($('#popupBubble').css('display') === 'block'){
$(document).bind('mousedown touchstart', function(e){
if($('#openPopupBubble').is(e.target) || $('#openPopupBubble').find('*').is(e.target)){
$(this).unbind(e);
}
else if(!$('#popupBubble').find('*').is(e.target)){
$('#popupBubble').hide();
$(this).unbind(e);
}
});
}
});
您还可以使用类使其更加抽象，并根据触发单击事件的按钮选择正确的弹出气泡。
$('body').on('click', '.openPopupBubble', function(){
$(this).next('.popupBubble').toggle();
if($(this).next('.popupBubble').css('display') === 'block'){
$(document).bind('mousedown touchstart', function(e){
if($(this).is(e.target) || $(this).find('*').is(e.target)){
$(this).unbind(e);
}
else if(!$(this).next('.popupBubble').find('*').is(e.target)){
$(this).next('.popupBubble').hide();
$(this).unbind(e);
}
});
}
});
其他回答
var exclude_div = $("#ExcludedDiv");; 美元(文档).click(函数(e) { 如果(! exclude_div。Is (e.target)) //如果目标div不是一个你想排除然后添加类隐藏 $ (" .myDiv1 ") .addClass(“隐藏”); })；
小提琴
这个解决方案应该工作得很好，很简单:
jQuery(document).ready(function($) {
jQuery(document).click(function(event) {
if(typeof jQuery(event.target).attr("class") != "undefined") {
var classnottobeclickforclose = ['donotcountmeforclickclass1', 'donotcountmeforclickclass2','donotcountmeforclickclass3'];
var arresult = jQuery.inArray(jQuery(event.target).attr("class"), classnottobeclickforclose);
if (arresult < 0) {
jQuery(".popup").hide();
}
}
});
});
在上面的代码更改donotcountmeforclickclass1, donotcountmeforclickclass2等类，你已经用来显示弹出或在它的点击弹出不应该影响，所以你必须明确添加类，你正在使用打开弹出。
用popup class更改.popup class。
var n = 0;
$("#container").mouseenter(function() {
n = 0;
}).mouseleave(function() {
n = 1;
});
$("html").click(function(){
if (n == 1) {
alert("clickoutside");
}
});
这么多答案我都用不上。相反，我采取了公认的答案(工作得很好)，并缩短为以下(使用后代选择器):
$(document).mouseup(function(e)
{
if (!$(e.target).is("#targetSelector,#targetSelector *")) {
$('#targetSelector').hide();
}
});
因为它只以用户交互的速度运行，没有给变量赋值
为我工作在所有设备上(2023);)
<section class="form-wrapper">
<div class="popup-container">
Popup Me
</div>
</section>
$('.form-wrapper').on('click', function(e) {
var pop_container = $(".popup-container");
// if the target of the click isn't the pop_container nor a descendant of the pop_container
if (!pop_container.is(e.target) && pop_container.has(e.target).length === 0) {
//you action here
pop_container.hide();
}
});
