Может ли Internet Explorer привязывать события к элементам с абсолютным позиционированием? - PullRequest
Новая
       8

Может ли Internet Explorer привязывать события к элементам с абсолютным позиционированием?

3 голосов
/ 11 мая 2010

Может ли Internet Explorer привязывать события к элементам с абсолютным позиционированием?

Я не могу привязать «щелчок» к элементу, перекрывающему другой.

Пробовал множество разных способов, вот несколько тестов, которые не работают в 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>

Ответы [ 4 ]

1 голос
/ 13 мая 2011

Просто была такая же проблема. Решено с помощью CSS.

Добавлен этот «хак» в моем определении стиля элемента: 

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

Протестировано в Firefox 4, IE 7 и последней версии Safari

1 голос
/ 11 мая 2010

РЕШЕНИЕ: добавлено 

"background-color:#FFFFFF;"
к стилю элемента. и использовал дурацкую функцию: 

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

и, наконец, при привязке Evento к элементу: 


   $("div.classHolder").each(function(){
      $(this).bind("click",function(e){ alert($(this).html()); }); 
      setOpacity(this,0);
   });
0 голосов
/ 11 мая 2010

Два вопроса: 1) Как заметил кто-то еще, IE игнорирует скрипт без типа «text / javascript» 2) Когда элемент находится в абсолютном положении, события щелчка запускаются, только если указатель мыши находится над «содержимым» в abs div. В этом случае текстовое содержимое напоминает букву G. Вы можете установить цвет фона, чтобы разрешить клики в любом месте в div. Кроме того, вы можете установить очень большой размер шрифта и просто добавить & nbsp; в элементе с переполнением: скрытый, чтобы сделать его прозрачным, но при этом обрабатывать щелчки по всему элементу.

Вот модифицированная версия вашего примера: 

<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>
0 голосов
/ 11 мая 2010

Я не знаю, обязательно ли это ваша проблема или нет, но вы пытались изменить свой атрибут type на text / javascript вместо application / javascript? Опять же, это может иметь 0 эффекта. Но опять же, IE странный.

...