Internet Explorer peut-il lier des événements à des éléments positionnés en absolu?

Internet Explorer peut-il lier des événements à des éléments positionnés en absolu?Internet Explorer peut-il lier des événements à des éléments positionnés en absolu?

Je ne peux pas lier un "clic" à un élément qui chevauche un autre.

ont essayé des tas de façons différentes, voici quelques tests qui ne fonctionnent pas dans IE:

//version 1: 
$(".classHolder").click(function(){ alert($(this).html()); }); 

//version 2: 
$(".classHolder").each(function(){ $(this).click(function(){ alert($(this).html()); }); }); 

//version 3: 
$("#id3").click(function(){ alert($(this).html()); }); 

//version 4: 
$("#id3").click(function(){ alert($(this).html()); }); 
$("#id3").trigger("click"); 


// in all trials I tested with and without: 
// $("img").unbind(); 
// $("div").unbind(); 
// just to make sure no "ghost" events were bind into the elements but no success. 


<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="application/javascript"> 
$(document).ready(function(){ 
    $("#id3").click(function(){ alert($(this).html()); }); 
    $("#id3").trigger("click"); 
}); 
</script> 
</head> 
<body> 
<div id="id1" style="position:relative;"> 
<img id="id2" src="http://www.google.co.uk/intl/en_com/images/srpr/logo1w.png" style=";z-index:-1;"/> 
<div id="id3" class="classHolder" style="position:absolute;border:2px solid red;left:0px;top:0px;width:70px;height:70px;z-index:1002;">G</div> 
<div id="id4" class="classHolder" style="position:absolute;border:2px solid red;left:210px;top:0px;width:25px;height:70px;z-index:1001;">L</div> 
asd asdf asdfg 
</div> 
</body> 
</html>

Source

2010-05-11 marcos

En position myCASE filtre absolu +: [ou -m-Filer] a été problème résolu résoudre problème – user956584

SOLUTION: ajouté

"background-color:#FFFFFF;"

au style de l'élément. et utilisé la fonction loufoque:


function setOpacity(obj,value){ 
    obj.style.opacity=value/10; 
    obj.style.filter='alpha(opacity='+value*10+')'; 
}

et enfin, lors de la liaison du evento à l'élément:


    $("div.classHolder").each(function(){ 
     $(this).bind("click",function(e){ alert($(this).html()); }); 
     setOpacity(this,0); 
    });

Source

2010-05-11 12:39:37 marcos

Je ne sais pas si cela est nécessairement votre problème ou non, mais avez-vous essayé de changer votre Attribut "type" à "text/javascript" au lieu de "application/javascript"? Encore une fois, cela peut avoir un effet nul. Mais encore une fois, IE est excentrique.

Source

2010-05-11 02:40:25 Jason

bon point par le problème persiste – marcos

Deux questions: 1) Comme quelqu'un d'autre a fait remarquer, IE ignore le script sans le type réglé sur « text/javascript » 2) Lorsque l'élément est absolu positionné, les événements de clic que le feu si la souris est sur "contenu" dans l'abs div. Dans ce cas, le contenu du texte comme la lettre G. Vous pouvez définir une couleur de fond pour autoriser les clics n'importe où dans la div. Alternativement, vous pouvez définir une très grande taille de police et juste mettre un & nbsp; dans l'élément avec overflow: caché pour lui permettre d'être transparent, mais toujours traiter les clics sur l'ensemble de l'élément.

est ici une version modifiée de votre exemple:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#id3").click(function(){ 
     alert($(this).html()); 
     }); 

    //$("#id3").trigger("click"); 
}); 
</script> 
</head> 
<body> 
<div id="id1" style="position:relative;"> 
<img id="id2" src="http://www.google.co.uk/intl/en_com/images/srpr/logo1w.png" style=";z-index:-1;"/> 
<div id="id3" class="classHolder" style="position:absolute;font-size:9000px;overflow:hidden;background-color:transparent;border:2px solid red;left:0px;top:0px;width:70px;height:70px;z-index:1002;">&nbsp;</div> 
<div id="id4" class="classHolder" style="position:absolute;border:2px solid red;left:210px;top:0px;width:25px;height:70px;z-index:1001;">&nbsp;</div> 
asd asdf asdfg 
</div> 
</body> 
</html>

Source

2010-05-11 02:56:03 David

Bien dit, et je cite: "2) Lorsque l'élément est positionné en absolu, les événements de clic ne tirent que si la souris est sur" contenu "dans le div abs." Merci – marcos

juste eu le même problème. Résolu avec css.

Ajouté ce "hack" dans ma définition de style élément:

background-color:#ffffff; 
filter: alpha(opacity=1); 
opacity: 0.01;

testé dans Firefox 4, IE 7 et le dernier safari

Source

2011-05-12 20:32:00 Hezad

C'est génial. Merci. – eomeroff

Internet Explorer peut-il lier des événements à des éléments positionnés en absolu?

Répondre

Questions connexes