input type="image" and input type="button" to draw in html5 canvas, the button is working but i need the image to work_问答_开发者

input type="image" and input type="button" to draw in html5 canvas, the button is working but i need the image to work

开发者 https://www.devze.com 2023-02-25 01:22 出处：网络

Hello What i need to do is when i click an image outside the canvas it calls a javascript function to draw something on the HTML5 canvas.

when i use a button to do this it works fine

<input type="button" id="xxx" onclick="draw()"/>

but when i use an image

<input type="image" id="xxx" onclick="draw()" src="file/sw1.gif"/>

the problem is that when i click the image it o开发者_如何学Gopens a new page something looks like index.html?x=89&y=8 the question is how can i make the image act just like the button without opening a new page? Thanks

Simply use the <img> tag instead of an image input, because this is not what it was made for.

You can certainly use an image button to execute Javascript on the onclick event. I think the key is to remove the action and id attributes from the form element. This (admittedly trivial) code works fine:

<!DOCTYPE html>
<html>
    <body>
        <form>
            <input type="image" value="Submit" onclick="doSomething();" src="html5.png">
        </form>
        <script>
            function doSomething()
            {
                alert("hi mom");
            }
        </script>
    </body>
</html>

Tested with FF 5, Chrome 12, Safari 5, and (gasp!) IE 9 (on Win7).