我正在使用这段代码:
$('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和当他们不再工作时，点击。
当前回答
在弹出窗口中使用接受的答案时，可能会遇到一些问题。在某些情况下，点击一个随机位置可能会导致不必要的操作，即错误地单击一个按钮可能会将您带到一个新页面。
我不确定这是否是最有效的解决方案，但为了防止这种情况，我建议使用屏幕掩码。确保屏幕掩码位于<body>标签的正下方，这样它就可以覆盖所有的屏幕宽度:100%;高度:100%。还要注意，它的z-index: 99高于所有元素。如果你想让另一个项目或div在屏幕掩码激活时可点击，只需为该项目或div分配更高的z-index。
屏幕掩码最初是不显示的(display:none)，当单击(onclick="hidemenu()")时，它调用一个hide函数。
<body>
<div class="screenmask" onclick="hidemenu()" style="position:fixed; width: 100%; height: 100%; top: 0px; right: 0px; display: none; z-index: 99;"></div>
处理“同一页面上多个不同弹出菜单”的javascript函数可能如下所示:
<script>
// an element with onclick="showmenu('id_here')" pops a menu in the screen
function showmenu(id) {
var popmenu = document.getElementById(id); // assume popmenu is of class .cardmenu
$('.cardmenu').hide(); // clear the screen from other popmenus first
$(popmenu).show(); // pop the desired specific menu
$('.screenmask').show(); // activate screenmask
}
function hidemenu() { // called when clicked on the screenmask
$('.cardmenu').hide(); // clear the screen from all the popmenus
$('.screenmask').hide(); // deactivate screenmask
}
</script>
其他回答
如果你在ios系统上有问题，鼠标up在苹果设备上无法工作。
在jquery mousedown /mouseup工作的ipad?
我用这个:
$(document).bind('touchend', function(e) {
var container = $("YOURCONTAINER");
if (container.has(e.target).length === 0)
{
container.hide();
}
});
甚至溶化:
$("html").click(function(){
$(".wrapper:visible").hide();
});
现场演示
检查单击区域不在目标元素中，也不在它的子元素中
$(document).click(function (e) {
if ($(e.target).parents(".dropdown").length === 0) {
$(".dropdown").hide();
}
});
更新:
jQuery停止传播是最好的解决方案
现场演示
$(".button").click(function(e){
$(".dropdown").show();
e.stopPropagation();
});
$(".dropdown").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$(".dropdown").hide();
});
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
我是这样做的:
var close = true;
$(function () {
$('body').click (function(){
if(close){
div.hide();
}
close = true;
})
alleswasdenlayeronclicknichtschliessensoll.click( function () {
close = false;
});
});
