stopPropagation()

最新推荐文章于 2024-08-29 10:00:00 发布

weixin_30394333

最新推荐文章于 2024-08-29 10:00:00 发布

阅读量107

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/booth/archive/2012/10/17/2727215.html

版权

定义和用法

不再派发事件。

终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

实例

<html>
  <head>
    <title>stopPropagation测试</title>
    <style type="text/css">
        td{    width:50px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("tr.leaditem").click(function() {
                $(this).css("background-color", "red");
            });
            $("tr.leaditem a").click(function(event) {
                event.stopPropagation();  //如果注释此句，那么将会点了链接，tr的click会触发，链接弹出。
            }); 
        });
    
    </script>
  </head>
  <body>
  
    <table id="table" cellpadding="0" cellspacing="0">
        <tr class="leaditem">
           <td>1</td>
           <td>2</td>
           <td><a href="http://google.com" target="_blank">google</a></td>
        </tr>
        <tr class="leaditem">
           <td>1</td>
           <td>2</td>
           <td><a href="http://google.com" target="_blank">google</a></td>
        </tr>
        <tr class="leaditem">
           <td>1</td>
           <td>2</td>
           <td><a href="http://google.com" target="_blank">google</a></td>
        </tr>
    </table>
  </body>
</html>