Ho un div floating che viene visualizzato e voglio che sia nascosto quando l'utente fa clic sul div. Questo sarebbe simile alla richiamata della funzione .hover() quando si passa sopra un elemento. Solo io voglio farlo per click.jQuery click off evento evento
Ho provato a impostare un evento click per il corpo, che nascondeva il div, ma che ha dato risultati inaspettati.
Qualcuno ha idee su come potrei facilmente farlo?
Un altro, forse più semplice, l'opzione sarebbe quello di aggiungere un div trasparente tra il DIV floating e il resto della pagina.
Un semplice evento click sul DIV trasparente può gestire l'occultamento e evita i problemi che si verificano con l'evento click.
Ottima idea. Avevo fatto qualcosa del genere in passato per una situazione diversa. Grazie per aver portato questo alla mia attenzione. –
Benvenuto, e grazie per aver accettato la risposta. Quasi non ho pubblicato perché non so davvero cosa stai progettando e ho pensato che l'opzione potrebbe non funzionare - ma a volte una prospettiva di outsider è il modo migliore per risolvere un problema. In bocca al lupo! – PhillFox
Com'è più semplice della risposta di DavidB? – JPot
Se si desidera cancellare il div quando si fa clic da qualche altra parte nella pagina, si può fare qualcosa di simile:
$('body').click(function(event) {
if (!$(event.target).closest('#myDiv').length) {
$('#myDiv').hide();
};
});
fantastico, grazie – HappyDeveloper
Questo è l'unico che funziona per me per la mia situazione. Grazie! – Jurgen
per cosa significa '.length'? – pruett
Si sta andando ad avere bisogno di monitorare l'evento mouseDown per l'intera pagina, ma devi prendere nota quando l'utente fa clic all'interno del tuo div floating.
vorrei suggerire di aggiungere un evento hover al div galleggiare in modo che quando l'utente è in bilico su di esso, mouseDown viene ignorato, ma quando non è in corso passa sopra mouseDown sarebbe chiuderlo
Sicuramente stai cercando l'evento blur?
* sospiro * qualcuno vuole spiegare il downvote? (o tutti questi downvotes?) – annakata
L'evento 'blur' funziona solo per gli elementi del modulo, il richiedente stava probabilmente cercando qualcosa di simile per gli elementi non-form. –
beh non è vero * affatto * - http://www.quirksmode.org/dom/events/blurfocus.html – annakata
Ecco un approccio a tutti gli effetti event-driven
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>
È un sacco di codice che conosco, ma qui solo per mostrare un approccio diverso.
Puoi provare questo. http://benalman.com/projects/jquery-clickoutside-plugin/
Se stai usando jQuery, è possibile utilizzare un selettore del tipo:
$("*:not(#myDiv)").live("click", function(){
$("#myDiv").hide();
});
Spiacenti, dovrebbe essere il seguente: $ ("*: not (#myTrigger)"). Live ("clic", funzione() { $ ("# myDiv").); }); – Kelly
Chi ha votato e perché? Questo ha funzionato perfettamente per me. Grazie! –
Questo non collega un click listener a * ogni singolo * elemento che non è #myDiv? Sembra un onere della memoria del browser più grande di semplicemente $ ('body'). –
Utilizzando un gestore di eventi sul documento funziona bene per me:
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;
}
Questa è una funzione per gestire l'evento di click, gli do da mangiare il selettore del popup e l'elemento jquery. Probabilmente meglio servito come plugin jQuery, ma questo è abbastanza semplice.
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);
};
Quindi, se si dispone di un elemento come popup <div class='popup'>test</div> è possibile utilizzare la mia funzione come clickOut("div.popup", $("div.popup"));
il modo migliore per farlo è: -
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("divtohide")) {
$(".divtohide").hide();
}
});
Questa è una bella elegante :) se stai usando lezioni che è – Prof83
ho trovato la soluzione in un forum ... ma non riesco a ritrovarlo per accreditare l'autore originale. Ecco la versione (modificata che risiede nel mio codice).
$(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');
//...
}
devo anche ESC attacchi keyup e un ancoraggio 'stretta' html non nella foto sopra.
Se non si vuole nascondere l'elemento che mostrerete cliccando sé:
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;
});
esempio si fa clic su un elemento di collegamento per visualizzare div menu, è sufficiente associare la funzione sfocatura di collegare elemento da nascondere div menù
$('a#displaymenu').click(function(){
$("#divName").toggle();
}).blur(function() {$("#divName").hide()})
Questo ha funzionato per me,
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();
}
});
Questo può essere usato per verificare se il div è visibile, se è visibile, farà scorrere l'oggetto in alto.
Si prega di approfondire "che ha dato risultati inaspettati". –