jQuery事件冒泡和默认行为-蒲公英云

jQuery事件冒泡和默认行为

在jQuery的事件冒泡和默认行为中，需要掌握四样东西。希望下面的代码会对大家有所帮助。在控制台中一段一段的查看运行效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery事件冒泡和默认行为</title>
    <style> *{ margin: 0; padding: 0 } .father{ width: 200px; height: 200px; background: red } .son{ width: 100px; height: 100px; background: blue; } </style>
    <script src="js/jquery.js"></script>
       <script> $(function(){ /* 1.什么是事件冒泡 2.如何阻止事件冒泡(两种方式，如下) 3.什么是默认行为？ 4.如何阻止默认行为(两种方式，如下) */ /* $(".son").click(function(event){ alert("son");//默认会执行father的方法 //return false;//当点击".son"后，不会再执行father的方法 event.stopPropagation(); }); $(".father").click(function(){ alert("father"); }); */ $("a").click(function(event){ alert("弹出注册框"); //return false;//在页面中点完确定后不会继续跳转 event.preventDefault(); }) }) </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <a href="http://www.baidu.com">注册</a><!--点击完后 默认会跳转-->
    <form action="http://www.taobao.com"><!--点击完后 默认会跳转-->
        <input type="text">
        <input type="submit">
</form>
</body>
</html>