Question

使用YUI 2和IE6的Overlay（旧的东西，但我必须处理这些）...并解决问题。那么，你能帮一两个想法吗？：d

假设创建了叠加层：

var newOverlay = new YAHOO.widget.Overlay("myOverlay" , 
                    {
            context: [someObjectToAttachTo, "tl", "bl"],
            monitorresize: false,
            iframe: false,
            zIndex: 900 });

某些内容被初始化（在div内）：

var content = new StringBuffer();
content.append('<div id="containerDiv">');
content.append('whatever! some text for the overlay');
content.append('</div>');

一个事件被附加到内部div，所以我们知道它何时被鼠标悬停在它上面：

YAHOO.util.Event.addListener('containerDiv', "mouseover", 
                     function() { alert('mouse in') });

将“倒”到叠加层中

  newOverlay.setBody( content.toString() );

渲染叠加层，但不可见：

  newOverlay.render( document.body );
  newOverlay.hide();

问题：即使隐藏了叠加层，如果您在其区域中移动鼠标，也会收到“鼠标悬停”的提示。

在IE7或Mozilla中不会发生这种情况。似乎它是一个错误并且与

IE有关，直到执行上下文完成后才重新绘制DOM

源和一些信息，another StackOverflow question

此机制显示和隐藏Overlay（注意：上面描述的代码在这里更新）：

 newOverlay.hideTimer = null; // new code
 YAHOO.util.Event.addListener('containerDiv', "mouseover", //event existed in above code
                    function() { 
                        alert('mouse in'); // line existed
                        clearTimeout(newOverlay.hideTimer) }); // added functionality
 YAHOO.util.Event.addListener('containerDiv', "mouseout", // new event 
                    function() { timedHide(newOverlay) });          

 newOverlay.setBody( content.toString() ); //old code
 newOverlay.render( document.body ); //old code
 newOverlay.hide(); //old code

上面使用的函数是：

 function customShow(overlayName) {
      var overlay = document.getElementById(overlayName);
      clearTimeout(overlay.hideTimer);
      overlay.syncPosition();
      overlay.show();
 }

 function timedHide(overlayName) {
      var overlay = document.getElementById(overlayName);
      overlay.hideTimer = setTimeout(function() {overlay.hide() }, 200);
 }

这里是hide / show机制的第二部分 - 触发器div;请忽略html和js的混合;你仍然可以阅读它：P

<span id="triggerSpan">I will show an Overlay</span>

及其事件：

YAHOO.util.Event.addListener('triggerSpan', "mouseover", 
                     function() { customShow('myOverlay') });   
YAHOO.util.Event.addListener('triggerSpan', "mouseout", 
                     function() { timedHide('myOverlay') });

创建叠加层时使用的对象是：

var someObjectToAttachTo = document.getElementById('triggerSpan');

长事...... 现在，你能看到另一种传递这个IE漏洞的方法吗？ 因此叠加层不会占用我的鼠标...我在那个需要点击和悬停的叠加层下面有东西（上面代码中没有提到该部分）

你能看到另一种创建/初始化/显示/隐藏覆盖的方法吗？

Answer 1

解决方法是在隐藏/显示叠加层时将 containerDiv 的显示样式更改为 none 或阻止。

为Overlay添加一些改变内部div样式的函数：

newOverlay.showOverlay = function() { 
    document.getElementById('containerDiv').style.display="block";
    newOverlay.show(); };

newOverlay.hideOverlay = function() {
    document.getElementById('containerDiv').style.display="none";
    newOverlay.hide(); };

并在函数 customShow 和 timedHide

中调用这些函数而不是调用overlay.show()或overlay.hide()

如何通过YUI Overlay克服IE6中的错误？

1 个答案: