div的button的click会触发两次解决方案

2012-05-15

div的button的click会触发两次HTML codehtml xmlnshttp://www.w3.org/1999/xhtml head runatserve

div的button的click会触发两次

HTML code

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title>     </title>     <script type="text/javascript">         function SayHello() {             alert("Hello World");         }     </script> </head> <body>     <form id="form1" runat="server">     <div onclick="SayHello()" style="width:300px; height:300px; background-color:Green">     <input type="button" value="click me" onclick="SayHello()" />     </div>     </form> </body> </html>

如果我们点击button，则会弹出两次Hello World,因为，button实际上是在div内，我们点击button的时候同时也在点击div。所以同时会触发button的onclick事件，也会触发div的onclick事件
请问大侠怎么解决这个问题

[解决办法]

HTML code

<html xmlns="http://www.w3.org/1999/xhtml">        <head runat="server">        <title>        </title>        <script type="text/javascript">            function SayHello(e) {                alert("Hello World");                e = window.event || e;                if (e.stopPropagation) {                    e.stopPropagation();                } else {                    e.cancelBubble = true;                }            }        </script>    </head>        <body>        <form id="form1" runat="server">            <div onclick="SayHello(event)" style="width:300px; height:300px; background-color:Green">                <input type="button" value="click me" onclick="SayHello(event)" />            </div>        </form>    </body></html>

热点排行

JavaScript

div的button的click会触发两次解决方案