事件冒泡

原创于 2016-12-01 16:44:15 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端开发

前端开发同时被 2 个专栏收录

57 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

<div style="background:lightgray;">
    外层div元素
    <span style="background: gray;">内层span元素</span>
    外层div元素
</div>
<div id="test">

</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('span').click(function (event) {
            var txt = $('#test').html()+"<p>好好学习，天天向上</p>"
            $("#test").html(txt);         
            event.stopPropagation();//阻止事件冒泡的函数

        });
        $('div').click(function (event) {
            var txt = $('#test').html()+"<p>好好学习，天天向上</p>"
            $("#test").html(txt);           
            event.stopPropagation();/阻止事件冒泡的函数

        });
        $('body').click(function (event) {
            var txt = $('#test').html()+"<p>好好学习，天天向上</p>"
            $("#test").html(txt);
             event.stopPropagation();//阻止事件冒泡的函数
        })
    })
</script>

或者js代码为：
<script type="text/javascript">
    $(document).ready(function () {
        $('span').click(function () {
            var txt = $('#test').html()+"<p>好好学习，天天向上</p>"
            $("#test").html(txt);
              return false;            
        });
        $('div').click(function () {
            var txt = $('#test').html()+"<p>好好学习，天天向上</p>"
            $("#test").html(txt);
              return false;           
        });
        $('body').click(function () {
            var txt = $('#test').html()+"<p>好好学习，天天向上</p>"
            $("#test").html(txt);
              return false;
        })
    })
</script>