<p id="outer" style="border:1px solid red;width:100px;height:100px;">
            <h1 id="inner">123456<h1>
         </p>
        
        document.getElementById('outer').addEventListener('click',function(){
          alert('p');
        })
        document.getElementById('inner').addEventListener('click',function(e){
          //阻止冒泡
          e.stopPropagation();
          alert(123456);
        })

      stopPropagation()方法 http://www.w3school.com.cn/jsref/event_stoppropagation.asp

这其实是个js冒泡。现在你要做的是阻止冒泡事件。

<p class="parent">
    <h1 class="child">孩子</h1>
</p>

$('parent').click(function(){
  alert(1);
})
 $('.parent .child').click(function(event){
  event.stopPropagation();//阻止冒泡事件
  alert(2);
})

这没办法吧，你把函数写在html里面了，你要是写在 script 里面的话，可以在 h1 绑定的那个函数里面最后加 e.preventDefault(), (e是传入函数的一个事件对象)，或者 加 return false。