我正在使用
JavaScript来隐藏图像并显示隐藏在其下的一些文本.但是,当文本显示时,如果你滚动它,它会触发容器上的mouSEOut事件,然后隐藏文本并再次显示图像,它只是进入一个奇怪的循环.
@H_502_2@html看起来像这样：
<div onmouSEOver="jsHoverIn('1')" onmouSEOut="jsHoverOut('1')"> <div id="image1" /> <div id="text1" style="display: none;"> <p>some content</p> <p>some more content</p> </div> </div>@H_502_2@和javascript(它使用scriptaculous)：
function jsHoverIn(id) {
if(!visible[id]) {
new Effect.Fade ("image" + id,{queue: { position: 'end',scope: id } });
new Effect.Appear ("text" + id,scope: id } });
visible[id] = true;
}
}
function jsHoverOut (id) {
var scope = Effect.Queues.get(id);
scope.each(function(effect) { effect.cancel(); });
new Effect.Fade ("text" + id,scope: id } });
new Effect.Appear ("image" + id,scope: id } });
visible[id] = false;
}
@H_502_2@这看起来很简单,但我无法绕过它.
解决方法
我给容器div：
position: relative;@H_502_2@并在容器中添加第三个div(应该是容器的最后一个子节点)：
position: absolute; top: 0; bottom: 0; left: 0; right: 0;@H_502_2@并在此div上捕获mouSEOver和mouSEOut事件. @H_502_2@因为它没有子元素,所以不应该将虚假鼠标悬停和mouSEOut事件传播给它. @H_502_2@编辑： @H_502_2@我认为发生的是,当光标从父元素移动到子元素时,父元素上发生mouSEOut事件,并且子元素上发生鼠标悬停事件.但是,如果子元素上的mouSEOver处理程序未捕获事件并停止传播,则父元素也将接收mouSEOver事件.
