我正在使用这段代码:
$('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和当他们不再工作时，点击。
当前回答
您可能希望检查为主体触发的click事件的目标，而不是依赖于stopPropagation。
喜欢的东西:
$("body").click
(
function(e)
{
if(e.target.className !== "form_wrapper")
{
$(".form_wrapper").hide();
}
}
);
此外，body元素可能不包括浏览器中显示的整个视觉空间。如果您注意到您的点击没有注册，您可能需要为HTML元素添加点击处理程序。
其他回答
摘自https://sdtuts.com/click-on-not-specified-element/
现场演示http://demos.sdtuts.com/click-on-specified-element
$(document).ready(function () {
var is_specified_clicked;
$(".specified_element").click(function () {
is_specified_clicked = true;
setTimeout(function () {
is_specified_clicked = false;
}, 200);
})
$("*").click(function () {
if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
$(".event_result").text("you were clicked on specified element");
} else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
$(".event_result").text("you were clicked not on specified element");
}
})
})
您可以将tabindex设置为父元素<div>，而不是监听DOM上的每一次单击以隐藏一个特定的元素，并监听focusout事件。
设置tabindex将确保在<div>上触发模糊事件(通常不会)。
所以你的HTML看起来是这样的:
<div class="form_wrapper" tabindex="0">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
你的JS:
$('.form_wrapper').on('focusout', function(event){
$('.form_wrapper').hide();
});
var $container = $("#popup_container"); $container.click(function(e) { if (e.target.id == $container.attr("id")) { $(this).hide(); } }); #popup_container { background: rgba(200,200,200,0.6); width: 100vh; height: 100vh; position: fixed; display: flex; justify-content: center; align-items: center; } #popup { background: yellow; border: 1px solid black; position: absolute; width: 50%; height: 50%; display: flex; justify-content: center; align-items: center; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="popup_container"> <div id="popup"> Popup </div> </div>
https://jsfiddle.net/041pj7re/
遇到同样的问题，就想出了这个简单的解决方法。它甚至可以递归工作:
$(document).mouseup(function(e)
{
var container = $("YOUR CONTAINER SELECTOR");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.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();
}
});
