У меня есть плавающий div, который отображается, и я хочу, чтобы он был скрыт, когда пользователь нажимает на div. Это будет похоже на обратный вызов функции .hover() при отклонении от элемента. Только я хочу сделать это для клика.jQuery click element event
Я попытался просто установить событие click для тела, которое скроет div, но это дало неожиданные результаты.
У кого-нибудь есть идеи, как я мог бы легко это сделать?
Другой, возможно, более простой, вариант было бы добавить прозрачный div между плавающим DIV и остальной частью страницы.
Простое событие щелчка на прозрачном DIV может обрабатывать скрытие, и это позволит избежать проблем, с которыми вы сталкиваетесь с событием click.
Отличная идея. Раньше я делал что-то подобное в другой ситуации. Спасибо, что привлек это внимание. –
Ваш прием и благодарность за принятие ответа. Я почти не писал, потому что я действительно не знаю, что вы разрабатываете, и думал, что этот вариант может не сработать, но иногда перспектива аутсайдеров - лучший способ решить проблему. Удачи! – PhillFox
Как это проще, чем ответить DavidB? – JPot
Если вы хотите, чтобы очистить DIV, когда вы щелкаете где-то на странице, вы можете сделать что-то вроде:
$('body').click(function(event) {
if (!$(event.target).closest('#myDiv').length) {
$('#myDiv').hide();
};
});
awesome, thanks – HappyDeveloper
Это единственное, что работает для меня в моей ситуации. Благодаря! – Jurgen
Что такое '.length' для? – pruett
Вы собираетесь нужно контролировать mouseDown событие для всей страницы, но вам нужно будет обратить внимание, когда пользователь нажимает внутри вашего плавающего div.
Я хотел бы предложить добавить событие парения к вашему плавали DIV так, когда пользователь парит над ним, mouseDown не учитывается, но когда он не парил над mouseDown бы закрыть его
Наверняка вы ищете событие blur?
* вздох * кто-нибудь хочет объяснить нисходящее движение вообще? (или все эти downvotes?) – annakata
Событие 'blur' работает только для элементов формы. Вероятно, искатель искал что-то похожее для элементов без формы. –
ну это не правда * вообще * - http://www.quirksmode.org/dom/events/blurfocus.html – annakata
Вот полноценный подход событийного
Zee код:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function()
{
var $layer = $('#layer');
var $body = $('html');
$layer
.bind('summon', function(e)
{
$layer.show();
$body.bind('click', dismissLayer);
})
.bind('dismiss', function(e)
{
$layer.hide();
$body.unbind('click', dismissLayer);
})
.click(function(e)
{
e.stopPropagation();
})
.trigger('dismiss')
;
function dismissLayer(e)
{
$layer.trigger('dismiss');
}
// This is optional - this just triggers the div to 'visible'
$('#control').click(function(e)
{
var $layer = $('#layer:hidden');
if ($layer.length)
{
$layer.trigger('summon');
e.stopPropagation();
}
});
});
</script>
<style type="text/css">
#layer {
position: absolute;
left: 100px;
top: 20px;
background-color: red;
padding: 10px;
color: white;
}
#control {
cursor: pointer;
}
</style>
</head>
<body>
<div id="layer">test</div>
<span id="control">Show div</span>
</body>
</html>
Это много кода, который я знаю, но здесь просто для того, чтобы показать другой подход.
Вы можете попробовать это. http://benalman.com/projects/jquery-clickoutside-plugin/
Если вы используете Jquery, вы можете использовать селектор типа:
$("*:not(#myDiv)").live("click", function(){
$("#myDiv").hide();
});
Извините - должно быть: $ ("*: not (#myTrigger)"). Live ("click", function() { $ ("# myDiv"). Hide (); }); – Kelly
Кто голосовал за это и почему? Это отлично сработало для меня. Спасибо! –
Не присоединяет ли прослушиватель кликов к * каждому элементу, который не является #myDiv? Похоже на большую нагрузку на память для браузера, чем просто $ ('body'). –
Использование обработчика событий на документе хорошо работает для меня:
function popUp(element)
{
element.onmousedown = function (event) { event.stopPropagation(); };
document.onmousedown = function() { popDown(element); };
document.body.appendChild(element);
}
function popDown(element)
{
document.body.removeChild(element);
document.onmousedown = null;
}
Это функция для обработки события клика я подаю ему селектор всплывающего окна и элемент jquery. Вероятно, лучше служил плагин jquery, но это достаточно просто.
clickOut = function(selector, element) {
var hide = function(event) {
// Hide search options if clicked out
if (!$(event.originalEvent.target).parents(selector).size())
$(element).hide();
else
$(document).one("click",hide);
};
$(document).one("click", hide);
};
Так что если у вас есть всплывающий элемент, как <div class='popup'>test</div> вы можете использовать свою функцию как clickOut("div.popup", $("div.popup"));
Лучший способ сделать это: -
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("divtohide")) {
$(".divtohide").hide();
}
});
Это красивый элегантный :) Если вы используете классы, которые – Prof83
Я нашел решение в форум ... но я не могу найти его, чтобы отблагодарить оригинального автора. Вот версия (измененная, которая живет в моем коде).
$(document).bind('mousedown.yourstuff', function(e) {
var clicked=$(e.target); // get the element clicked
if(clicked.is('#yourstuff')
|| clicked.parents().is('#yourstuff')) {
// click safe!
} else {
// outside click
closeIt();
}
});
function closeIt() {
$(document).unbind('mousedown.emailSignin');
//...
}
У меня также есть ESC KeyUp привязок и «закрыть» HTML якорь не на фото выше.
Если вы не хотите, чтобы скрыть элемент, который будет отображаться, нажав себя:
var div_active, the_div;
the_div = $("#the-div");
div_active = false;
$("#show-the-div-button").click(function() {
if (div_active) {
the_div.fadeOut(function(){
div_active = false;
});
} else {
the_div.fadeIn(function(){
div_active = true;
});
}
});
$("body").click(function() {
if div_active {
the_div.fadeOut();
div_active = false;
}
});
the_div.click(function() {
return false;
});
пример щелкнуть ссылку элемента для отображения Div меню, вы просто связать функцию размытия, чтобы связать элемент, чтобы скрыть DIV меню
$('a#displaymenu').click(function(){
$("#divName").toggle();
}).blur(function() {$("#divName").hide()})
Это работает для меня,
var mouseOver = false;
$("#divToHide").mouseover(function(){mouseOver=true;});
$("#divToHide").mouseout(function(){mouseOver=false;});
$("body").click(function(){
if(mouseOver == false) {
$("#divToHide").hide();
}
});
$('body').click(function (event) {
if ($("#divID").is(':visible')) {
$('#divID').slideUp();
}
});
Это можно использовать, чтобы проверить, отображается ли div, если он виден, затем он сдвигает объект вверх.
Просьба уточнить, «что дало неожиданные результаты». –