Javascript DOM对象只需要在Internet Explorer中单击两次

我真的很难理解下面的代码。我对使用DOM和Javascript还很陌生，这个脚本在FireFox、Chrome和Safari中运行得非常完美。在Internet Explorer中，需要单击两次。如果您访问FireFox中的链接，然后访问Internet Explorer中的同一链接，您将看到，如果您在FireFox中单击一个形状，它会立即显示颜色选项。如果您在Internet Explorer中执行此操作，它将不会显示颜色选项，直到您在形状上单击两次或在一个形状上单击一个形状，然后再单击另一个形状。IE、DOM、Javascript忍者能告诉我脚本有什么问题导致需要在IE中单击两次吗

<?php 
$swatches = $this->get_option_swatches();
?>
<script type="text/javascript">
    document.observe('dom:loaded', function() {
        try {
            var swatches = <?php echo Mage::helper('core')->jsonEncode($swatches); ?>;

            function find_swatch(key, value) {
                for (var i in swatches) {
                    if (swatches[i].key == key && swatches[i].value == value)
                        return swatches[i];
                }
                return null;
            }

            function has_swatch_key(key) {
                for (var i in swatches) {
                    if (swatches[i].key == key)
                        return true;
                }
                return false;
            }

            function create_swatches(label, select) {
                // create swatches div, and append below the <select>
                var sw = new Element('div', {'class': 'swatches-container'});
                select.up().appendChild(sw);

                // store these element to use later for recreate swatches
                select.swatchLabel = label;
                select.swatchElement = sw;

                // hide select
                select.setStyle({position: 'absolute', top: '-9999px'});

                $A(select.options).each(function(opt, i) {
                    if (opt.getAttribute('value')) {
                        var elm;
                        var key = trim(opt.innerHTML);

                        // remove price
                        if (opt.getAttribute('price')) key = trim(key.replace(/\+([^+]+)$/, ''));

                        var item = find_swatch(label, key);
                        if (item)
                            elm = new Element('img', {
                                src: '<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?>swatches/'+item.img, 
                                alt: opt.innerHTML, 
                                title: opt.innerHTML, 
                                'class': 'swatch-img'});
                        else {
                            console.debug(label, key, swatches);
                            elm = new Element('a', {'class': 'swatch-span'});
                            elm.update(opt.innerHTML);
                        }
                        elm.observe('click', function(event) {
                            select.selectedIndex = i;
                            fireEvent(select, 'change');
                            var cur = sw.down('.current');
                            if (cur) cur.removeClassName('current');
                            elm.addClassName('current');
                        });
                        sw.appendChild(elm);
                    }
                });

            }
            // Hide Second Option's Label
            function hideStuff(id) {
                if (document.getElementById(id)) {
                    document.getElementById(id).style.display = 'none';
                }
            }
            hideStuff("last-option-label");
            function showStuff(id) {
                if (document.getElementById(id)) {
                    document.getElementById(id).style.display = '';
                }
            }

            function recreate_swatches_recursive(select) {
                // remove the old swatches
                if (select.swatchElement) {
                    select.up().removeChild(select.swatchElement);
                    select.swatchElement = null;
                }

                // create again
                if (!select.disabled)
                    showStuff("last-option-label");
                    create_swatches(select.swatchLabel, select);

                // recursively recreate swatches for the next select
                if (select.nextSetting)
                    recreate_swatches_recursive(select.nextSetting);
            }

            function fireEvent(element,event){
                if (document.createEventObject){
                    // dispatch for IE
                    var evt = document.createEventObject();
                    return element.fireEvent('on'+event, evt);      
                }
                else{
                    // dispatch for firefox + others
                    var evt = document.createEvent("HTMLEvents");
                    evt.initEvent(event, true, true ); // event type,bubbling,cancelable
                    return !element.dispatchEvent(evt);
                }
            }

            function trim(str) {
                return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
            }


            $$('#product-options-wrapper dt').each(function(dt) {

                // get custom option's label
                var label = '';
                $A(dt.down('label').childNodes).each(function(node) {
                    if (node.nodeType == 3) label += node.nodeValue;
                });
                label = trim(label);

                var dd = dt.next();
                var select = dd.down('select');
                if (select && has_swatch_key(label)) {
                    create_swatches(label, select);

                    // if configurable products, recreate swatches of the next select when the current select change
                    if (select.hasClassName('super-attribute-select')) {
                        select.observe('change', function() {
                            recreate_swatches_recursive(select.nextSetting);
                        });
                    }
                }
            });
        }
        catch(e) {
            alert("Color Swatches javascript error. Please report this error to support@galathemes.com. Error:" + e.message);
        }
    });
</script>

---

console.debug已被弃用。在函数create_swatcheslabel中，选择写入控制台的位置。debuglabel，key，swatches；将其更改为console.loglabel、key、swatches；或者你可以把那行代码一起删除。。。。。。。thaterrorbegone

你能试着把代码示例缩减到与你的问题相关的部分吗？嗨，本，没有产生错误，我不太确定问题出在哪里。。。这就是为什么我把整个剧本都删掉了。就像我说的那样，它在FF、Chrome和Safari中运行良好，只是在IE中出现了奇怪的行为。我在你的代码中发现了奇怪的部分$$'product-options-wrapper dt'为什么要使用双美元呢？Hi InspiredJW这不是我的代码，但我已经盯着它看了足够长的时间了，它开始感觉像是。。。我相信双美元的存在是因为使用了prototype.js。由于浏览器不支持此功能，您必须注意仅在已扩展的元素上使用DOM扩展。例如，上面的示例在FF和Opera中工作，但在创建元素后添加Element.extendmy_div以使脚本真正稳定。您可以使用美元函数作为快捷方式，如以下示例所示：//这将在IE中出错：$'someElement'.parentNode.hide//以使其跨浏览器：$$'someElement'.parentNode.hide//此处引用此选项