[英]prototype observers not firing in IE8
I can't work out what's causing IE8 to ignore these observers. 我无法弄清楚是什么原因导致IE8忽略了这些观察者。 It works in FF, Chrome (10) and Safari.
它适用于FF,Chrome(10)和Safari。 It never hits the breakpoints set in IE8 Developer Tools.
它永远不会达到IE8开发人员工具中设置的断点。
<script type="text/javascript">
//<![CDATA[
var timeoutHolder = null;
function displayZoom(id){
window.clearTimeout(timeoutHolder); //if we are coming from another hover target, prevent the opacity reset
if($('mini-main').getOpacity()!=0.4)
new Effect.Opacity('mini-main',{from:1.0,to:0.4,duration:0.5});
new Effect.Appear(id,{duration:0.3});
}
function resetZoom(id){
timeoutHolder = window.setTimeout(function(){
new Effect.Opacity('mini-main',{from:0.4,to:1.0,duration:0.5});
}, 100); //gives us 100 ms for user to move onto another target before we reset the opacity
new Effect.Fade(id,{duration:0.5});
}
$$('.mini-target').each(function(target_div){
target_div.observe('mouseover',function(){
displayZoom(target_div.id+'-hover');
});
target_div.observe('mouseout',function(){
resetZoom(target_div.id+'-hover');
});
});
//]]>
</script>
the associated phtml is: 关联的phtml是:
<img src="<?php echo Mage::getBaseUrl('media').'Main.jpg'?>" id="mini-main"/>
<div id="mini-target-1" class="mini-target"></div>
<div id="mini-target-2" class="mini-target"></div>
<div id="mini-target-3" class="mini-target"></div>
<div id="mini-target-4" class="mini-target"></div>
<div id="mini-target-1-hover" class="mini-hover" style="display:none">
<img src="<?php echo Mage::getBaseUrl('media').'mini-rollover-1.png'?>"/>
</div>
<div id="mini-target-2-hover" class="mini-hover" style="display:none">
<img src="<?php echo Mage::getBaseUrl('media').'mini-rollover-2.png'?>"/>
</div>
<div id="mini-target-3-hover" class="mini-hover" style="display:none">
<img src="<?php echo Mage::getBaseUrl('media').'mini-rollover-3.png'?>"/>
</div>
<div id="mini-target-4-hover" class="mini-hover" style="display:none">
<img src="<?php echo Mage::getBaseUrl('media').'mini-rollover-4.png'?>"/>
</div>
I've also tried attaching the observers individually (without the each
) but that doesn't make any difference: 我也试着分别安装每个观察员(不包括
each
),但没有任何区别:
$('mini-target-2').observe('mouseover',function(){
displayZoom('mini-target-2-hover');
});
$('mini-target-2').observe('mouseout',function(){
resetZoom('mini-target-2-hover');
});
Thanks, 谢谢,
JD 京东
Hackiest of hacks. 最骇人听闻的骇客。 It works if you set a background on the
mini-target
divs. 如果您在
mini-target
div上设置了背景,则可以使用。 I ended up using a conditional setStyle for IE to display a spacer gif. 我最终使用IE的条件setStyle来显示spacer gif。 1998 browser hacks FTW!!!
1998年浏览器入侵FTW !!!
if(Prototype.Browser.IE){
target_div.setStyle({background: 'url("<?php echo Mage::getBaseUrl('media').'spacer.gif'?>")'});
}
If anyone can explain why IE needs a background to fire an Observer, I'd be happy to accept their answer... Probably something to do with hasLayout? 如果有人可以解释为什么IE需要背景才能触发Observer,我很乐意接受他们的回答……可能与hasLayout有关吗?
I've had a case before where set of ID names caused Javascript issues in IE. 我曾经遇到过一组ID名称导致IE中的Javascript问题的情况。
The scheme consisted of numbers immediately after a hyphen -
. 该方案由连字符
-
后面的数字组成。
Try removing the hyphen before the number. 尝试删除数字前的连字符。 Change
mini-target-1
to mini-target1
? 将
mini-target-1
更改为mini-target1
吗?
I had this issue, when observe
wasn't firing on a hidden element. 当
observe
不是针对隐藏元素触发时,我遇到了这个问题。 All I had to do to make it work was to make that element display:block;
我要做的就是使该元素
display:block;
before using observe
. 使用前先
observe
。
If your element is initially set to display:none;
如果您的元素最初设置为
display:none;
, then when you change the background image, IE8 (and below) might be changing the css display property to block
automatically. ,那么当您更改背景图片时,IE8(及更低版本)可能会将css display属性更改为自动
block
。
What if you change the way you're doing it so it's like: 如果您更改操作方式,例如:
$(document).ready(function () {
$('.mini-target').mouseover(function () {
displayZoom($(this).attr("id") + '-hover');
}).mouseout(function () {
resetZoom($(this).attr("id") + '-hover');
});
});
You're still referencing each "mini-target" as you mouseover it and we chain the mouseout to the end of it. 当您将鼠标悬停在每个“迷你目标”上时,您仍在引用它们,我们将鼠标链接到其末尾。
That will run in IE8. 它将在IE8中运行。
Cheers, Al 欢呼声
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.