divの中のpをクリックする時、どのように事件の泡が立つことを阻止しますか？

今日はノートを整理して、javaScriptを勉強しています。その時には難しい問題がありました。特にまとめてみます。私のように迷っていた初心者にも助けてほしいです。
やはり一つのケースで問題を説明します。これまでのコードは以下の通りです。

 <div onclick="show('a')">
   <p onclick="show('b')"></p>
 </div>

cssコードは以下の通りです

div{
  width:500px;
  height:500px;
  background:red;
 }
 p{
  width:200px;
  height:200px;
  background:blue;
 }

jsコードは以下の通りです

 function show(info){
    alert(info);
 }

jsを少し知っている人はすべてpをクリックする時、事件の泡が発生する構造に基づいて、父の元素のdivのonclick事件を触発することができて、結果は先にbを弾いて、更にaを弾きます。
じゃ、どうやってショー（）という関数を修正してbだけポップアップしますか？私の初めての解決方法は（皆さん、スプレーしないでください）：

function show(e,info){
 function cancelBubble(e){
  e = e || window.event;
  if (e.stopPropagation) {  
     e.stopPropagation(); 
  }else {   
     e.cancelBubble = true; 
  } 
 }
 alert(info);
}

結果はいつもエラーです。私はいろいろなBaiduを始めます。最終的な解決方法は以下の通りです。

function show(info){
   alert(info);
   cancelBubble();
}
function cancelBubble(e) { 
   var evt = e ? e : window.event; 
    if (evt.stopPropagation) {  //W3C 
     evt.stopPropagation(); 
    }else {  //IE  
     evt.cancelBubble = true; 
    } 
}

なぜですか？私が分析したのはこのようにして二つのメリットがあります。2.イベントの泡立ちを阻止するコードをパッケージ化して関数として複数回呼び出すことができます。
はい、問題は円満に解決されました。
以上が本文の全部です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてくれると同時に、私達を応援してください。