Search code examples
javascripthtmlonclickmarquee

onclick() doesn't respond in a <div> nested in a <marquee>

Before anyone goes off, this is only a 'quick and dirty' proof-of-concept bit of code we're doing -- although it's hated, the marquee tag continues to be supported on every browser we have checked so it's a good facsimile for the POC code-up and easy to code up (and we're not using jquery).

But onclick() fails to work -- here's the code:

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">

 <script type="text/javascript">
 function dohello()
 {
     alert("HELLO !!");
 }

 </script>    
 </head>
 <body>

 <marquee behavior="scroll" scrolldelay="135"><div onclick="dohello()">THEE MARQUEE!!      
 </div>
 </marquee>    
 </body>
 </html>

The text "THEE MARQUEE!!" successfully moves across the page, marquee-style, but the dohello() is not getting called on a mouse click.

I used f12 and the console reports no errors at all.

What can I do for a mouse click handler on the div inside the marquee tag?

Solution

  • Well you could try by reverse finding it based on mouse position with 

    var element = document.elementFromPoint(x, y);

    https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint

    What are you coding for IE 6?? Just use CSS transitions or animations. they are easy and support events way better than marquees apparently.

    EDIT JSFIddle of css marquee. http://jsfiddle.net/46PDe/