我正在使用这段代码:
$('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 exclude_div = $("#ExcludedDiv");; 美元(文档).click(函数(e) { 如果(! exclude_div。Is (e.target)) //如果目标div不是一个你想排除然后添加类隐藏 $ (" .myDiv1 ") .addClass(“隐藏”); })；
小提琴
其他回答
这样不行吗?
$("body *").not(".form_wrapper").click(function() {
});
or
$("body *:not(.form_wrapper)").click(function() {
});
切换常规和触摸设备
我在这里读了一些答案，并创建了一些代码，我使用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);
}
});
}
});
$(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 close = true;
$(function () {
$('body').click (function(){
if(close){
div.hide();
}
close = true;
})
alleswasdenlayeronclicknichtschliessensoll.click( function () {
close = false;
});
});
dojo.query(document.body).connect('mouseup',function (e)
{
var obj = dojo.position(dojo.query('div#divselector')[0]);
if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
MyDive.Hide(id);
}
});
