2011-07-12 29 views
8

Hola tengo un div de un formulario. Quiero que deshabilite el evento de clic cuando el mouse está fuera de la div. Así que probé esto, pero no está funcionando. Aún no se puede hacer clic en div. ¿¿Alguna idea??Deshabilitar el clic del mouse cuando está fuera de div

var flag = false; 
$("#foo").live("mouseenter",function(){ 
    flag = true; 
}).live("mouseleave",function(){ 
    flag = false; 
}) 

$(document).click(function(){ 
    if(!flag) 
     return false; 
}); 
+0

¿Por qué es necesario deshabilitar hacer clic fuera del formulario? ¿Qué quieres lograr? –

+0

¿Qué quiere decir con desactivar el clic fuera del div? – ShankarSangoli

+0

muestro un div cuando hago clic en un enlace y cuando se muestra este div no quiero que se pueda hacer clic en el resto del documento excepto en el div .. –

Respuesta

6

No puede evitar que se dispare el evento click desde todo el documento. Puedes hacerlo por elemento. Probablemente puedas bloquear toda la pantalla usando un div transparente posicionado (baja opacidad) y ocultarlo una vez que el div esté visible.

var $body = $(document.body); 
var $div = $("<div id='dummyDiv'/>").hide().appendTo($body); 
$div.css({position:"absolute", height: $body.height(), width: $body.width(), background: "#000", opacity: 0.5}).show(100); 

//to hide it 
$("#dummyDiv").hide(100); 
+0

Puede evitar que el evento click se active desde el documento completo: http://stackoverflow.com/a/8596014/931358 – Jurik

+0

+1 por simplicidad. Agregar una superposición hace que el problema del manejo de eventos click sea irrelevante. –

0

Istead de usar return false, utilice e.preventDefault http://css-tricks.com/6809-return-false-and-prevent-default/

+0

hacen lo mismo – locrizak

+3

@locrizak - no hacen * lo mismo, no lo hacen en absoluto. Uno evita la acción predeterminada, uno detiene el evento muerto en sus pistas, deteniendo la propagación también. Decir que son lo mismo es completamente incorrecto. –

+0

También probé eso pero no funcionaba demasiado. –

1
$("#foo").live("mouseenter",function(){ 
    $(document).bind('click', onDocumentClick); 
}).live("mouseleave",function(){ 
    $(document.unbind('click'); 
}); 

function onDocumentClick(e){ 

}; 

Creo desea que la clic en #foo en lugar de document, si lo que simplemente puede hacer esto:

$('#foo').click(function(){ 

});

Como tiene que pasar sobre un elemento para hacer clic, funcionará bien.

+0

escribí return false y e.preventDefault() en el funcionDocumentClick pero ambos no funcionó .. –

+0

¿qué estás tratando de hacer exactamente? – locrizak

Cuestiones relacionadas