Question

观察以下非常简单的构造：

<div id="home_thumbnails"> 
    <img onClick='loadFeature(0);' src='image_1.jpg'> 
    <img onClick='loadFeature(1);' src='image_2.jpg'> 
    <img onClick='loadFeature(2);' src='image_3.jpg'> 
    <img onClick='loadFeature(3);' src='image_4.jpg'> 
    <img onClick='loadFeature(4);' src='image_5.jpg'> 
</div>

在Firefox中，这与广告完全一样。

但是，在Chrome中，前两个图像的loadFeature不会被称为。我在alert()的顶部有function loadFeature()，表明前两个函数甚至都没有调用该函数。然而，剩下的三个人称之为非常棒。

对此的任何解释都将非常感谢

Answer 1

<强> Here is a recreation of what could be happening 即可。

可能有一个透明的div或图像覆盖前两个图像。

例如，看看这个看似无害的代码：

<html><body>
<script type="text/javascript">
    function loadFeature(number)
    {
        alert(number);
    }
</script>
<div id="important"></div>
<div id="home_thumbnails">
    <img onClick='loadFeature(0);' src='image1.jpg'>
    <img onClick='loadFeature(1);' src='image2.jpg'>
    <img onClick='loadFeature(2);' src='image3.jpg'>
    <img onClick='loadFeature(3);' src='image4.jpg'>
    <img onClick='loadFeature(4);' src='image5.jpg'>
</div>
</body></html>

将上述代码与宽度为X和高度为Y的图片以及以下CSS结合使用：

#important {
    width:2Xpx;
    height:Ypx;
    position:absolute;
    top:0;
    left:0; }

并且您的前两张图片无法点击。

Answer 2

我刚刚在Chrome中对此进行了测试，它可以顺利运行：

<script type="text/javascript">
    function loadFeature(number)
    {
        alert(number);
    }
</script>

<div id="home_thumbnails">
    <img onClick='loadFeature(0);' src='image_1.jpg'>
    <img onClick='loadFeature(1);' src='image_2.jpg'>
    <img onClick='loadFeature(2);' src='image_3.jpg'>
    <img onClick='loadFeature(3);' src='image_4.jpg'>
    <img onClick='loadFeature(4);' src='image_5.jpg'>
</div>

您可能希望确保没有任何内容可能正在删除或替换您的onClick事件，或者没有隐藏/不可见元素隐藏/覆盖部分div / images。如果不是这样，你可以发布一些代码（例如你的loadFeature函数）吗？

Answer 3

这可能很奇怪，但检查与前两个图像重叠的任何其他元素。也许您实际上是在点击该元素而不是图片，因此onclick事件不会触发img元素。

前五个图像中有两个没有点击，但仅限Chrome

3 个答案: