Problem in event handling !!!

Question

apanimesh061 0 Junior Poster

13 Years Ago

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

javascript

4 Contributors
5 Replies
95 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Troy III

Airshow 416 WiFi Lounge Lizard

13 Years Ago

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

You may find differences between browsers.

Airshow

twiss 155 Veteran Poster

13 Years Ago

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

Reply to this topic

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.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2011-07-01T23:59:34+00:00

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

apanimesh061 0 Junior Poster · Answer 2 · 2011-07-02T00:12:16+00:00

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 !

Troy III 272 Posting Pro · Answer 3 · 2011-07-03T03:49:43+00:00

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