上一节:
下一节:

  jQuery event.stopPropagation() 方法

  • 定义和用法

    event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。
    提示：请使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了该方法。

  • 语法

    event.stopPropagation()

  • 参数

    参数 描述
    event 必需。event 参数来自事件绑定函数。

  • 示例

    下例演示了阻止 click 事件冒泡到父元素： 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到菜鸟教程</title>
    //此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("span").click(function(event){
               event.stopPropagation();
               alert("点击了span标签。");
             });
             $("p").click(function(event){
               alert("点击了p标签。");
             });
             $("div").click(function(){
               alert("点击了div标签。");
             });
          });
    </script>
</head>
<body>
     <div style="height:100px;width:500px;padding:10px;border:1px solid red;">
           这个是div元素
         <p style="background-color:pink">这是div元素中的p元素。 <br>
             <span style="background-color:orange">这是p和div元素中的span元素。</span>
          </p>
     </div>
</body>
</html>
    尝试一下

  • 相关页面

返回 jQuery 事件参考
上一节:
下一节: