我正在使用这段代码:
$('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和当他们不再工作时，点击。
当前回答
var n = 0;
$("#container").mouseenter(function() {
n = 0;
}).mouseleave(function() {
n = 1;
});
$("html").click(function(){
if (n == 1) {
alert("clickoutside");
}
});
其他回答
现场演示与ESC功能
适用于桌面和移动设备
var notH = 1,
$pop = $('.form_wrapper').hover(function(){ notH^=1; });
$(document).on('mousedown keydown', function( e ){
if(notH||e.which==27) $pop.hide();
});
如果在某些情况下，你需要确保你的元素在点击文档时是可见的:If ($pop.is(':visible') && (notH||e.which==27)) $pop.hide();
如果你在ios系统上有问题，鼠标up在苹果设备上无法工作。
在jquery mousedown /mouseup工作的ipad?
我用这个:
$(document).bind('touchend', function(e) {
var container = $("YOURCONTAINER");
if (container.has(e.target).length === 0)
{
container.hide();
}
});
我在一个搜索框上工作，根据处理的关键字显示自动完成。当我不想点击任何选项，然后我将使用下面的代码隐藏处理的列表，它的工作。
$(document).click(function() {
$('#suggestion-box').html("");
});
建议框是我的自动完成容器，我显示的值。
$(document).ready(function() { $('.modal-container').on('click', function(e) { if(e.target == $(this)[0]) { $(this).removeClass('active'); // or hide() } }); }); .modal-container { display: none; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 999; } .modal-container.active { display: flex; } .modal { width: 50%; height: auto; margin: 20px; padding: 20px; background-color: #fff; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="modal-container active"> <div class="modal"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p> </div> </div>
var n = 0;
$("#container").mouseenter(function() {
n = 0;
}).mouseleave(function() {
n = 1;
});
$("html").click(function(){
if (n == 1) {
alert("clickoutside");
}
});
