First Two out of five images don't get onClick, but only in Chrome_问答_开发者

First Two out of five images don't get onClick, but only in Chrome

开发者 https://www.devze.com 2023-01-16 17:58 出处：网络

Observe the following painfully simple construction: <div id=\"home_thumbnails\"> <img onClick=\'loadFeature(0);\' src=\'image_1.jpg\'>

Observe the following painfully simple construction:

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

In firefox, this does exactly as advertised.

In Chrome, however, loadFeature doesn't get called for the first two images. I have an alert() at the top of function loadFeature() that demonstrates that the fu开发者_开发百科nction isn't even called by the first two. The remaining three, however, call it just great.

Any explanation for this would be MUCH appreciated

Here is a recreation of what could be happening.

There's probably a transparent div or image covering up the first two images.

For example, take this innocuous looking code:

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

Combine the above code with images of width X and height Y and the following CSS:

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

and your first two image are not clickable.

I just tested this in Chrome, and it works without a hitch:

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

You might want to make sure that nothing might be removing or replacing your onClick events, or that no hidden/invisible elements are hiding/covering part of your div/images. If that's not the case, could you post some more of your code (such as your loadFeature function)?

This might be odd, but check for any other elements overlapping with first two images. Maybe you are actually clicking on that element, instead of your images, so the onclick event won't fire on img elements.