Mam pływający element div, który zostanie wyświetlony i chcę go ukryć, gdy użytkownik kliknie element div. Byłoby podobne do funkcji wywołania funkcji .hover() po najechaniu kursorem poza element. Tylko chcę to zrobić dla kliknięcia.jQuery kliknij element zdarzenia
Próbowałem po prostu ustawić zdarzenie click dla ciała, które ukryłoby div, ale dało to nieoczekiwane wyniki.
Ktoś ma pomysły na to, jak mogę to łatwo zrobić?
Innym, być może prostsza opcja byłoby dodanie przezroczystego div między pływającym DIV a resztą strony.
Proste zdarzenie kliknięcia na przezroczystym DIV mogło obsłużyć ukrywanie i pozwoliłoby uniknąć problemów z napotkaniem zdarzenia kliknięcia.
Świetny pomysł. W przeszłości robiłem coś takiego w innej sytuacji. Dziękuję za zwrócenie mi tej uwagi. –
Twoje powitanie i dzięki za zaakceptowanie odpowiedzi. Prawie nie pisałem, ponieważ nie wiem, co projektujesz i pomyślałem, że opcja może nie działać - ale czasami perspektywa outsiderów jest najlepszym sposobem na rozwiązanie problemu. Powodzenia! – PhillFox
Jak to jest prostsze niż odpowiedź DavidB? – JPot
Jeśli chcesz wyczyścić div po kliknięciu gdzieś indziej na stronie można zrobić coś takiego:
$('body').click(function(event) {
if (!$(event.target).closest('#myDiv').length) {
$('#myDiv').hide();
};
});
niesamowite, dzięki – HappyDeveloper
Jest to jedyny, który działa dla mnie w mojej sytuacji. Dzięki! – Jurgen
do czego służy ".length"? – pruett
będziesz potrzebować, aby monitorować zdarzenia mouseDown dla całej strony, ale będziesz musiał wziąć pod uwagę, gdy użytkownik kliknie w twój pływający div.
Proponuję dodanie zdarzenia najechania na swoje unosił div tak, gdy użytkownik znajduje się nad nim, mouseDown jest lekceważone, ale kiedy nie jest on unosił się nad mouseDown by zamknąć go
Z pewnością szukasz wydarzenia blur?
* westchnienie * Ktoś chce w ogóle wyjaśnić upadłość? (lub wszystkie te spadki?) – annakata
Zdarzenie 'blur' działa tylko dla elementów formularza, pytający prawdopodobnie szukał czegoś podobnego dla elementów nieformalnych. –
cóż, to nie jest prawda * w ogóle * - http://www.quirksmode.org/dom/events/blurfocus.html – annakata
Oto podejście pełnoprawnym zdarzeniami
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>
Jest dużo kodu, który znam, ale tutaj po to, aby pokazać inne podejście.
Możesz spróbować tego. http://benalman.com/projects/jquery-clickoutside-plugin/
Jeśli używasz jQuery, można użyć selektora takiego:
$("*:not(#myDiv)").live("click", function(){
$("#myDiv").hide();
});
Przepraszamy - powinno być następujące: $ ("*: nie (#myTrigger)"). Live ("click", function() { $ ("# myDiv"). Hide (); }); – Kelly
Kto to głosował i dlaczego? To zadziałało idealnie dla mnie. Dzięki! –
Czy nie dołącza on detektora kliknięcia do * każdego pojedynczego elementu *, który nie jest #mp3? Wydaje się, że obciążenie pamięci jest większe niż po prostu $ ("body"). –
Korzystanie z obsługi zdarzenia na dokumencie działa dobrze dla mnie:
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;
}
Jest to funkcja aby obsłużyć zdarzenie click-out, zasilam go selektorem popup i elementem jquery. Prawdopodobnie lepiej służy jako wtyczka jquery, ale jest to dość proste.
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);
};
Więc jeśli masz element popup jak <div class='popup'>test</div> można korzystać z funkcji takich jak clickOut("div.popup", $("div.popup"));
Najlepszym sposobem na to jest: -
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("divtohide")) {
$(".divtohide").hide();
}
});
To jest ładne eleganckie :) jeśli używasz klas, które jest – Prof83
Znalazłem rozwiązanie w forum ... ale nie mogę go odzyskać, aby dodać autorowi oryginału. Oto wersja (zmodyfikowana, która żyje w moim kodzie).
$(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');
//...
}
Mam też ESC powiązania keyUp i kotwica 'blisko' html nie na zdjęciu powyżej.
Jeśli nie chcesz, aby ukryć element, który pokaże Ci, klikając się:
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;
});
przykład kliknięcie elementu link do wyświetlania div menu, po prostu związać funkcji rozmycia odwołuje elementu do ukrycia div menu
$('a#displaymenu').click(function(){
$("#divName").toggle();
}).blur(function() {$("#divName").hide()})
ten pracował dla mnie,
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();
}
});
Można tego użyć do sprawdzenia, czy element div jest widoczny, czy jest widoczny, a następnie przesunie obiekt w górę.
Proszę opracować "to dało nieoczekiwane wyniki". –