事件冒泡與阻止事件冒泡

時間 2019-12-05

原文原文鏈接

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/jquery1.42.min.js"></script>
       <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
       <style>
           .pic{width:1000px;margin:50px auto;}
           .pic li{list-style: none;float: left;width:200px;margin-right: 20px;}
           .pic li img{width: 100%;}
           .posi{display:none;width:500px;position: absolute;top:50px;left:318px;}
       </style>
   </head>
   <body>
       <div id="content" style="width:200px;height: 200px;background: #ccc;">
           外層div
           <span style="text-indent: 2em;display: block;background: red;">內層span元素</span>
           外層div元素
       </div>
       <div id="msg" style="padding-bottom: 200px;"></div>
       <script type="text/javascript">
           $(function(){
               //爲span元素綁定click事件
               $('span').bind('click',function(event){
                   var txt =$('#msg').html()+'<p>內層span元素被點擊.</p>';
                   $('#msg').html(txt);
                   event.stopPropagation();

               });
               //爲div綁定click事件
               $('#content').bind('click',function(event){
                   var txt=$('#msg').html()+'<p>外層div元素被點擊.</p>';
                   $('#msg').html(txt);
                   event.stopPropagation();

               });
               //爲body事件綁定click事件
               $('body').bind('click',function(){
                   var txt =$('#msg').html()+'<p>body元素被點擊.</p>';
                   $('#msg').html(txt);
               })
           })
       </script>
   </body>
</html>
//    瀏覽器兼容性問題javascript

使用jQuery給一個事件加處理方法時，爲了阻止一個事件向上冒泡，使用了event.stopPropagation()，但在IE下卻報對象不支持此屬性或方法的錯誤（IE下是event. cancelBubble=true），jquery不是兼容各瀏覽器嗎？html

後來看了下jQuery的官方文檔後，原來在使用event的時候，必須在事件處理方法中加入參數event，不然這個event爲 window.event，而不是jQuery中的event。因此在jQuery定義事件處理方法時，最好加上參數event，以下：java

$('#btn').click(function(event){}) //推薦
$('#btn').click(function(){}) //不推薦

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。