javascript - Mousedown event not fired on a Div if the Div is placed on top of an img tag - issue is only in IE - Stack Overflow

admin管理员组

文章数量:1391991

I have placed a Div on top of an img tag. In my example the Div with cls 'justForClickCls' is placed on top of an img which is wrapped in another div 'gameBoardElementGreyCls'. The mousedown on the 'justForClickCls' div is not firing in IE. However it works in every other browser.

Here is the code. Any help is much appreciated. By the way i'm testing it i IE 9

<div class='gameBoardElementCls'>
    <div id='9' class='justForClickCls' style='z-index:10;position:absolute;margin:20px;width:80px;height:80px;'></div>
    <div class='gameBoardElementGreyCls'><img src='img/greygmelement.png' width='110px' height='110px'></img></div>
</div>

<script>
    $("div.justForClickCls").mousedown(function () {
        alert('clicked 1');
    });
</script>

I have placed a Div on top of an img tag. In my example the Div with cls 'justForClickCls' is placed on top of an img which is wrapped in another div 'gameBoardElementGreyCls'. The mousedown on the 'justForClickCls' div is not firing in IE. However it works in every other browser.

Here is the code. Any help is much appreciated. By the way i'm testing it i IE 9

<div class='gameBoardElementCls'>
    <div id='9' class='justForClickCls' style='z-index:10;position:absolute;margin:20px;width:80px;height:80px;'></div>
    <div class='gameBoardElementGreyCls'><img src='img/greygmelement.png' width='110px' height='110px'></img></div>
</div>

<script>
    $("div.justForClickCls").mousedown(function () {
        alert('clicked 1');
    });
</script>

• javascript
• jquery
• html
• internet-explorer

Share Improve this question Follow asked Apr 29, 2012 at 23:50 user983327user983327 97322 gold badges88 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

In my case setting opacity to zero is not a valid solution since the div has other elements that would bee invisible. This solved the problem. Add the following to the div style: background-image:url('.');

Got stuck with the same problems for hours and user983327's last ment saved my day: IE required me to set a background color for the element to work.

Setting the opacity to 0 then achieved the same result as having a transparent background and made the whole thing cross browsers patible.

First thing you should fix is the closing tag in the img

<img src='img/greygmelement.png' width='110px' height='110px'></img>

To

<img src='img/greygmelement.png' width='110px' height='110px' />

Next, mousedown seems unnecessary since you are trying to trap the click. Simple use click instead of mousedown.

Now check this demo of you coding, which is working

本文标签：