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;  400px; height: 300px; margin: 0px auto;">  
            <a href="#" id="dianji">点击这里并不让外层的div事件触发</a>  
        </div>  
  
    </body>  
  
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yourself/p/9185961.html