[英]jQuery trigger event when click outside the element
$(document).click(function(evt) {
var target = evt.currentTarget;
var inside = $(".menuWraper");
if (target != inside) {
alert("bleep");
}
});
我试图找出如何制作它,以便如果用户点击某个div(menuWraper)之外,它会触发一个事件..我意识到我可以让每次点击触发一个事件,然后检查点击的currentTarget是否是与从$(“。menuWraper”)中选择的对象相同。 但是,这不起作用,currentTarget是HTML对象(?)而$(“。menuWraper”)是Object对象? 我很迷茫。
只需让你的menuWraper
元素调用event.stopPropagation()
,使其click事件不会冒泡到document
。
试一试: http : //jsfiddle.net/Py7Mu/
$(document).click(function() {
alert('clicked outside');
});
$(".menuWraper").click(function(event) {
alert('clicked inside');
event.stopPropagation();
});
或者,你可以return false;
而不是使用event.stopPropagation();
如果您有下拉菜单等子元素
$('html').click(function(e) {
//if clicked element is not your element and parents aren't your div
if (e.target.id != 'your-div-id' && $(e.target).parents('#your-div-id').length == 0) {
//do stuff
}
});
这里最常见的应用是关闭单击文档,但不是当它来自该元素时,为此你要停止冒泡,如下所示:
$(".menuWrapper").click(function(e) {
e.stopPropagation(); //stops click event from reaching document
});
$(document).click(function() {
$(".menuWrapper").hide(); //click came from somewhere else
});
所有在这里做的是阻止点击从.menuWrapper
元素内部冒泡 (通过event.stopPrpagation()
)。 如果没有发生这种情况,那么点击来自其他地方,并且默认情况下会让它成为document
,如果它到达那里,我们会隐藏那些.menuWrapper
元素。
试试这些......
$(document).click(function(evt) {
var target = evt.target.className;
var inside = $(".menuWraper");
//alert($(target).html());
if ($.trim(target) != '') {
if ($("." + target) != inside) {
alert("bleep");
}
}
});
我知道问题已得到解答,但我希望我的解决方案可以帮助其他人。
stopPropagation
在我的情况下引起了问题,因为我需要click
事件来获取其他内容。 此外,并非每个元素都应该在单击时关闭div。
我的解决方案
$(document).click(function(e) {
if (($(e.target).closest("#mydiv").attr("id") != "mydiv") &&
$(e.target).closest("#div-exception").attr("id") != "div-exception") {
alert("Clicked outside!");
}
});
此代码将打开相关菜单,并将设置单击侦听器事件。 触发后,它将遍历目标id的父项,直到找到菜单ID。 如果没有,它将隐藏菜单,因为用户已在菜单外单击。 我测试了它,它的工作原理。
function tog_alerts(){
if($('#Element').css('display') == 'none'){
$('#Element').show();
setTimeout(function () {
document.body.addEventListener('click', Close_Alerts, false);
}, 500);
}
}
function Close_Alerts(e){
var current = e.target;
var check = 0;
while (current.parentNode){
current = current.parentNode
if(current.id == 'Element'){
check = 1;
}
}
if(check == 0){
document.body.removeEventListener('click', Close_Alerts, false);
$('#Element').hide();
}
}
我不认为文件会触发click事件。 尝试使用body元素捕获click事件。 可能需要检查一下......
试试这个
$(document).click(function(event) {
if(event.target.id === 'xxx' )
return false;
else {
// do some this here
}
});
$(document).click((e) => {
if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) {
} else {
this.onClose();
}
});
function handler(event) {
var target = $(event.target);
if (!target.is("div.menuWraper")) {
alert("outside");
}
}
$("#myPage").click(handler);
var visibleNotification = false;
function open_notification() {
if (visibleNotification == false) {
$('.notification-panel').css('visibility', 'visible');
visibleNotification = true;
} else {
$('.notification-panel').css('visibility', 'hidden');
visibleNotification = false;
}
}
$(document).click(function (evt) {
var target = evt.target.className;
if(target!="fa fa-bell-o bell-notification")
{
var inside = $(".fa fa-bell-o bell-notification");
if ($.trim(target) != '') {
if ($("." + target) != inside) {
if (visibleNotification == true) {
$('.notification-panel').css('visibility', 'hidden');
visibleNotification = false;
}
}
}
}
});
$( "element" ).focusout(function() {
//enter code here
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.