防止事件冒泡--jQuery事件处理

publicTIM 2011-07-26

l防止事件冒泡

知识点:

引用
假设面临事件冒泡的问题,如何阻止意外结果的发生。

事件对象的target(目标)属性:控制事件传播,并停止事件冒泡。利用target属性,可以确定哪个DOM元素首先接收到事件,并确保该事件不会自动传播到其他元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>jQuery事件处理--防止事件冒泡</title>

    <script type="text/javascript" src="rs/js/jquery.js"></script>

    <script type="text/javascript">

    $(

        function()

        {

<!--            $('div').click(-->

<!--                function()-->

<!--                {-->

<!--                    alert('YOU HAVE CLICKED THE DIV ELEMENT!');-->

<!--                }-->

<!--            );-->

<!--            $('p').click(-->

<!--                function()-->

<!--                {-->

<!--                    alert('YOU HAVE CLICKED THE PARAGRAPH ELEMENT!');-->

<!--                }-->

<!--            );-->

<!--            $('span').click(-->

<!--                function()-->

<!--                {-->

<!--                    alert('YOU HAVE CLICKED THE SPAN ELEMENT!');-->

<!--                }-->

<!--            );-->

//          防止冒泡方式

            $('div').click(

                function(event)

                {

                    var tg = $(event.target);

                    if(tg.is('div'))

                        alert('YOU HAVE CLICKED THE DIV ELEMENT!');

                    if(tg.is('p'))

                        alert('YOU HAVE CLICKED THE PARAGRAPH ELEMENT!');

                    if(tg.is('span'))

                        alert('YOU HAVE CLICKED THE SPAN ELEMENT!');

                }

            );

        }

    )

    </script>

  </head>

  <body>

   <h2>防止事件冒泡</h2><br />

   <div>DIV ELEMENT

   <p>PARAGRAPH ELEMENT

   <span>SPAN ELEMENT</span>

   </p>

   </div>

  </body>

</html>

相关推荐

ELEMENTS爱乐冬雨 / 0评论 2020-05-29