Question

我在页面上有一堆元素，其中包含一类“产品”。我想为每一个附加一个事件处理程序，因此在悬停时会显示一个工具提示。以下代码在Chrome，Firefox，Safari和IE8 +中运行良好，但不适用于IE7：

    function init() {
        $$('.product').each(function(elm) {
            var id = elm.id;
            var name = new Element('div', {'class': 'title'}).update(products[id].name);
            var desc = new Element('div').update(products[id].desc);
            var content = new Element('div');
            content.appendChild(name);
            content.appendChild(desc);
            elm.observe('click', function() {showTooltip(content)});
            elm.observe('mouseover', function() {showTooltip(content)});
            elm.observe('mouseout', function() {hideTooltip()});
        });
    }

    document.observe('dom:loaded', init);

在IE7中我第一次将鼠标悬停在每个元素上时，它运行正常。但是，第二次将鼠标悬停在元素上时，“content”变量为空。如果我用简单的警报（content.innerHTML）替换我的showTooltip（）函数，它会第一次警告正确的HTML，并且每次警报都为空。

我还尝试将内容存储为对象，并使用bindAsEventListener，但我得到了相同的结果。

任何人都有任何想法导致内容不能在IE7中持续存在？

由于

Answer 1

我会尝试将“内容”附加到DOM中，并传递对工具提示的元素的引用，而不是代码中的元素。

Answer 2

@Josh Ryan，在mouseout上执行的hideTooltip（）函数是什么。如果那是在功能丢失的时候，我会从调试开始。

编辑：对不起，我现在记得你说过这个在其他浏览器中有效，但是看看mouseout功能仍然会有所帮助。

IE7在事件处理函数 - prototype.js中丢失参数

2 个答案: