当多个div嵌套时候，点击最里层的div，会调用外层div的事件。

如果我们要实现点击div，只是调用当前div的事件，闲话不说，贴出代码

 

 

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Div.aspx.cs" Inherits="Div" %>

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

    <script language="javascript" type="text/javascript">
        function BigDiv(event) {
            alert("Big");

            if (event.stopPropagation)
            {
                event.stopPropagation();//在基于firefox内核的浏览器中支持做法stopPropagation
            }
            else
            {
                event.cancelBubble = true;//基于ie的写法
            }

        }
        function LittleDiv() {
            alert("little");
            event.cancelBubble = true;
            }
        function yy() {
            alert("sb");
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id ="fdk1" onclick="yy()">
        YY
        <!--此处会调用yy()事件-->
        <div id="child2" onclick="BigDiv(event)">
            大div
            <!--加event.cancelBubble=true",只调用当前div的事件,禁止事件的浮生-->
            <div onclick="LittleDiv();">
                小div</div>
        </div>
    </div>
    </form>
</body>
</html>