代码之家 › 专栏 › 技术社区 › Dan Ray

五张图片中的前两张不会被点击,但只能用铬合金。

google-chrome firefox html javascript

1

Dan Ray · 技术社区 · 15 年前

请注意以下极其简单的结构:

<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>

在火狐中,这和广告中的一样。

然而,在Chrome中,不会调用LoadFeature 前两张图片 . 我有一个 alert() 在…的顶端 function loadFeature() 这表明前两个函数甚至没有调用该函数。然而,剩下的三个却称之为“很棒”。

对此有何解释将不胜感激。

3 回复 | 直到 15 年前

1

5

Peter Ajtai 15 年前

Here is a recreation of what could be happening .

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

例如,以这个看起来无害的代码为例:

<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; }â

前两张图片是不可点击的。

2

Nathan Wheeler 15 年前

我刚在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/图像的一部分。如果不是这样,您可以发布更多的代码(比如您的loadFeature函数)吗?

3

2

Ali Sattari 15 年前

这可能很奇怪,但请检查是否有其他元素与前两个图像重叠。也许你是在点击那个元素,而不是你的图片,所以 onclick 事件无法启动 img 元素。