JS点击子元素不触发父元素点击事件

给子元素应用

event.stopPropagation();  
方法阻止事件冒泡

 

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>  
        <script type="text/javascript">  
            $(document).ready(function() {  
                $("#hanli").bind('click', function(event) {  
                    alert('外层的div被点击了!');  
                });  
                $("#dianji").bind('click', function(event) {  
                    alert('里面的a点击，但是不想触发外面那个div的事件。');  
                    event.stopPropagation();  
                });  
            });  
        </script>  
        <title>JQuery实现点击div里面的a的能触发点击时间，但是不触发外面的div的点击事件</title>  
    </head>  
  
    <body>  
        <div id="hanli" style="background-color: #DDDDDD; width: 400px; height: 300px; margin: 0px auto;">  
            <a href="#" id="dianji">点击这里并不让外层的div事件触发</a>  
        </div>  
  
    </body>  
  
</html>

 

posted @ 2018-06-15 09:35  苡米阳光  阅读(3048)  评论(0)  编辑  收藏  举报