<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Events !</title>
    <script type="text/javascript">
        window.onload = function() {
            [B]//Only this occurs[/B]
            document.getElementById('anImage').onclick = function() {
                alert('F-14 Tomcat !');
            }
            [B]//This gives the result of the first[/B]
            document.getElementById('anImage').ondblclick = function() {
                alert('Not again ! !');
            }
            [B]//Nothing happens!!!![/B]
            document.getElementById('anImage').onkeydown = function() {
                alert('Please !');
            }
        };
        
    </script>
    <style type="text/css">
        #anImage
        {
            height: 300px;
            width: 372px;
        }
    </style>
</head>
<body>
    <img src="1012562.jpg" id="anImage" />
</body>
</html>

Why is that only the first event occurs ??

Please help !

Recommended Answers

All 5 Replies

It's just a question of which events fire on the img element.

You may find differences between browsers.

Airshow

The problem is the following:

- You click on the image
- The first event occurs
- An alert displays
- You can't click again (doubleclick), because there's an alert on your screen.

As for onkeydown, it only works for certain elements (input/textarea/document).

Yes, what Twiss says.

I was assuming one event tested at a time. Other two commented out. That would be a reasonable test strategy. Either that or use something other than alerts to observe what's going on.

Airshow

I clicked on OK on the first alert box.
Then I double clicked on the image ..... still only the first one happens !

Could you please tell me a way by which one can make a sequence of event handles .... i.e after first one is done ... the next is only supposed to happen and so on !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Events !</title>
    <script type="text/javascript">
        window.onload = function() {
            [B]//Only this occurs[/B]
            document.getElementById('anImage').onclick = function() {
                alert('F-14 Tomcat !');
            }
            [B]//This gives the result of the first[/B]
            document.getElementById('anImage').ondblclick = function() {
                alert('Not again ! !');
            }
            [B]//Nothing happens!!!![/B]
            document.getElementById('anImage').onkeydown = function() {
                alert('Please !');
            }
        };
        
    </script>
    <style type="text/css">
        #anImage
        {
            height: 300px;
            width: 372px;
        }
    </style>
</head>
<body>
    <img src="1012562.jpg" id="anImage" />
</body>
</html>

Why is that only the first event occurs ??

Please help !

You mean "onmousedown" perhaps?
Image cant fire the keyboard event without heaving received focus, but by default images cant have focus by themselves.

This will work
and that's the order of events.
*

<script>

        window.onload = function() {
            //Only this occurs
            document.getElementById('anImage').onclick = function() {
                console.log('F-14 Tomcat !');
            }
            //This gives the result of the first
            document.getElementById('anImage').ondblclick = function() {
                console.log('Not again ! !');
            }
            //Nothing happens!!!!
            document.getElementById('anImage').onmousedown = function() {
                console.log('Please !');
            }
        };

</script>
  <img src="1012562.jpg" id="anImage">
LOG: Please ! 
LOG: F-14 Tomcat ! 
LOG: Not again ! !

if you really want a keyboard event onkeydown you need to first make the image focusable, and again it will fire the key down event only while retaining focus... once it has lost focus, it will no longer fire keyboard events.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.