button在li元素中事件激活问题

Question

<li>
  <ul class="ui-list ui-list-pure ui-border-tb ui-list-active">
      <li class="ui-border-t" data-href="">
          <h4>顺丰（76354762537465235）</h4>
          <div class="cancel">
          <button class="ui-btn ui-btn-danger" >
                            取消订单
          </button></div>
          <h4>啊啊啊</h4>
          <h4>斑斑驳驳</h4>
          <div class="cus-date">35分钟前发布</div>
      </li>
  </ul>
</li>

我要点击li里面那个按钮，li本身有个事件，就是点击后跳转data-href，但是无论怎么点，都激活的是li事件而不是button事件。
该如何实现点击button激活button事件，点击li激活li事件？

Answer 1

试试这个

$("button").click(function(e) {
    e.preventDefault();
    //do something
});

Answer 2

把事件注册在冒泡阶段

        //注册事件函数
        function addEvent(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            } else if(element.attachEvent){
                element.attachEvent('on'+type,handler);
            } else {
                element['on' + type] = handler;
            }
        }

在写button事件时，添加以下代码：

//button事件函数，假设函数名为buttonEvent
function buttonEvent(event){
    //取消事件的进一步冒泡
    event = event || window.event;
    if(event.stopPropagation){
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
   
    //do something
    
}

注册事件：

var btn=document.getElementById('btn');//给button添加一个id='btn'，便于获取元素
addEvent(btn,'click',buttonEvent);