0

我有一个脚本，当单击锚标记时会弹出一个 div 元素

echo '<a href="javascript:void(0);" onclick="popup(\'yme-property-pop\'); loadproperties(\'open\', \''.$row['id'].'\');"><h2>' . $row['placename'] . '</h2></a>';

它来自 PHP 脚本，在 FF 和 IE(9) 中运行良好。但是chrome不会运行它，至少在ver。18.0.1025.168米

弹出窗口（除）；当我单击它时会触发事件，但它并没有完成函数所在脚本内的函数调用。

            var width_ratio = 0.4; // If width of the element is 80%, this should be 0.2 so that the element can be centered

    function toggle(div_id) {
        var el = document.getElementById(div_id);
        if ( el.style.display == 'none' ) { el.style.display = 'block';}
        else {el.style.display = 'none';}
    }
    function blanket_size(popUpDivVar) {
                    alert(popUpDivVar);
        if (typeof window.innerWidth != 'undefined') {
            viewportheight = window.innerHeight;
        } else {
            viewportheight = document.documentElement.clientHeight;
        }
        if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
            blanket_height = viewportheight;
        } else {
            if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
                blanket_height = document.body.parentNode.clientHeight;
            } else {
                blanket_height = document.body.parentNode.scrollHeight;
            }
        }
        var blanket = document.getElementById('blanket');
        blanket.style.height = blanket_height + 'px';
        var popUpDiv = document.getElementById(popUpDivVar);
        popUpDiv_height=0;
        popUpDiv.style.top = popUpDiv_height + 'px';
    }
    function window_pos(popUpDivVar) {
        if (typeof window.innerWidth != 'undefined') {
            viewportwidth = window.innerHeight;
        } else {
            viewportwidth = document.documentElement.clientHeight;
        }
        if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
            window_width = viewportwidth;
        } else {
            if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
                window_width = document.body.parentNode.clientWidth;
            } else {
                window_width = document.body.parentNode.scrollWidth;
            }
        }
        var popUpDiv = document.getElementById(popUpDivVar);
        window_width=window_width/2;
        window_width = window_width * width_ratio; 
        popUpDiv.style.left = window_width + 'px';
    }
    function popup(windowname) {
                    alert(windowname); // THIS WORKS
        blanket_size(windowname);
        window_pos(windowname);
        toggle('blanket');
        toggle(windowname);     
    }

该脚本中的最后一个函数是第一个被调用的函数。我在里面放了一个警告框来验证它是否被解雇了。但是，我在它调用的下一个函数（blanket_size）中放置了一个警报框，它没有触发，因为我在函数的第一行有警报框。它没有开火。

我根本不知道为什么。奇怪的是，这些东西在其他浏览器中有效，但在 chrome 中无效。有任何想法吗？

谢谢！

编辑：而且我还验证了传递给 popup() 函数的参数值（“windowname”参数）是有效的/有一个值。它包含 HTML 文档中的 DIV 的 ID，它不是动态创建的。

编辑 2：好的，当且仅当我将带有参数值的警报框（窗口名称）添加到弹出（窗口名称）函数时，我才运行脚本。但是如果我删除那个盒子，它就会再次停止工作。

编辑 3： 调试器上完全没有错误。但现在我更加困惑了。经过大量尝试，它似乎在随机使用警报框！有时有效，有时无效。

最终编辑 将逻辑更改为 jQuery。早就应该这样做了！

    // Open property
$(".property-open-link", ".yme-propertyitem").live('click', function() { 
    $("#yme-property-pop").css({'display': 'block', 'z-index': '9999' });
    $("#blanket").css({'display': 'block', 'height', getBlanketHeight(), 'z-index': '1000' });
    loadproperties('open', $(this).closest(".yme-propertyitem").attr("id"));
});
// Close property button
$("#yme-property-close").live('click', function() { 
    $("#yme-property-pop").css('display', 'none');
    $("#blanket").css('display', 'none');
});
4

1 回答 1

1

首先要弄清楚几件事：

  1. 如果您为我们创建一种与您的代码交互的方式，这真的很有帮助，尤其是当您在此处粘贴 PHP 代码而不是纯 HTML 时

  2. 您是否有理由不使用库来处理 DOM 交互？当涉及到跨浏览器代码时，它将使您的代码更加简洁并消除一些可能的故障点。

正确的，

我有点不确定为什么您的代码无法在 Chrome 中运行。我在 jsfiddle 中设置了一个演示，它似乎工作正常。

你会注意到我没有在元素的onclick属性中附加事件，<a/>你也不应该。这可能就是问题所在。

目前，jsfiddle 中的代码按预期发出警报，并且仅当在切换中找不到相关的 DOM 节点时才会失败。

笔记：

addEventListener在示例中不是跨浏览器，这是使用 DOM 库的另一个原因。

于 2012-05-02T20:07:16.307 回答