jquery事件冒泡，jquery终止事件冒泡

最新推荐文章于 2021-05-25 16:41:18 发布

赢在执行

最新推荐文章于 2021-05-25 16:41:18 发布

阅读量4.5k

点赞数

分类专栏： Jquery 文章标签： jquery function table xhtml javascript html

本文链接：https://blog.csdn.net/hexytxl/article/details/6746914

版权

Jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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 οnclick="alert('这是table')">
    <tr οnclick="alert('这是tr')">
        <td οnclick="alert('这是td')">
            <p οnclick="alert('这是p')">段落</p>
        </td>
    </tr>
</table>
<table id="table1">
    <tr id="tr1">
        <td id="td1">
            <p id="p1">你好</p>
        </td>
    </tr>
</table>
</body>
</html>