jQuery--事件冒泡和默认行为 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{
            background: grey;
        }
    </style>
    <script type="text/javascript" src='jquery-3.2.1.min.js'></script>
    <script type="text/javascript">
        $(function(){
            $('span').bind('click',function(){
                var txt = $('#msg').html()+'<p>内层span元素被单击.</p>';
                $('#msg').html(txt);
            });

            $('#content').bind('click',function(){
                var txt = $('#msg').html()+'<p>外层div元素被单击.</p>';
                $('#msg').html(txt);
            });

            $('body').bind('click',function(){
                var txt = $('#msg').html()+'<p>body元素被单击.</p>';
                $('#msg').html(txt);
            });

        });
    </script>
</head>
<body>
    <div id="content">
        外层div元素<br />
        <span>内层span元素</span><br /> 
        外层div元素
    </div>
    <div id="msg"></div>
</body>
</html>

单击span的时候，div和body绑定的时间也会被触发

停止事件冒泡--event.stopPropagation();

事件对象：$('').bind('click',function(event){

　　event.stopPropagation();  //event事件对象

});   

2、阻止元素的默认行为

event.preventDefault()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='jquery-3.2.1.min.js'></script>
    <script type="text/javascript">
        $(function(){
            $('#sub').bind('click',function(event){
                var username = $('#username').val();
                if(username == ''){
                    $('#msg').html('<p>文本框的值不能为空.</p>')
                    event.preventDefault();  //阻止默认事件的发生
                }
            });
        });
    </script>
</head>
<body>
    <form action="test.html">
        用户名：<input type="text" id="username" name="" /><br />
        <input type="submit" value="提交" id="sub" name="" />
    </form>
    <div id="msg"></div>
</body>
</html>

3、如果同时需要阻止默认行为和冒泡事件，返回false。

return false;

 

posted @ 2017-05-18 15:45  影子疯  阅读(638)  评论(0)  编辑  收藏  举报