1. 程式人生 > >jquery事件冒泡,jquery終止事件冒泡

jquery事件冒泡,jquery終止事件冒泡

<!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>
    <title>事件冒泡</title>
    <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(function () {

            $("#p1").click(function (e) {
                alert("p1被點選了");
                e.stopPropagation(); //終止冒泡的方法
            });
            $("#td1").click(function () {
                alert("td1被點選了");
            });
            $("#tr1").click(function () {
                alert("tr1被點選了");
            });
            $("#table1").click(function () {
                alert("table1被點選了");
            });

        });
    </script>
</head>
<body>
<table onclick="alert('這是table')">
    <tr onclick="alert('這是tr')">
        <td onclick="alert('這是td')">
            <p onclick="alert('這是p')">段落</p>
        </td>
    </tr>
</table>
<table id="table1">
    <tr id="tr1">
        <td id="td1">
            <p id="p1">你好</p>
        </td>
    </tr>
</table>
</body>
</html>