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

4
Contributors
5
Replies
6
Views
6 Years
Discussion Span
Last Post by Troy III
0

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

You may find differences between browsers.

Airshow

0

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

0

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

0

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 !

0
<!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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.