js停止冒泡和阻止浏览器默认行为

js停止冒泡

• W3C/ jquery阻止冒泡的方式:
  event.stopPropagation()
• IE:
  event.cancelBubble=true
• 兼容性写法
  window.event ? window.event.cancelBubble=true : event.stopPropagation;

stopPropagation()/cancelBubble=true 可以阻止事件冒泡,但不会阻止浏览器的默认行为.

例子

  <div id="div" onclick="alert('div')">
    <ul onclick="alert('ul')">
      <li>test</li>
    </ul>
  </div>
  <script type="text/javascript">
    document.getElementsByTagName('li')[0].onclick = function (event) {
      alert('li')
      // 阻止冒泡
      var event = event || window.event;
      event ? event.cancelBubble=true : event.stopPropagation();
    }
  </script>

js阻止默认行为

• w3c / jquery阻止默认行为 :
• event.preventDefault()
• IE:
• evevt.returnValue=false;
• 兼容性写法
  event.preventDefault() ? event.preventDefault() : evevt.returnValue=false;

例子

  <a href="http://www.baidu.com" id="test">www.baidu.com</a>
  <script type="text/javascript">
    var baidu = document.getElementById('test');
    baidu.onclick = function (event) {
      var event = event || window.event;
      event.preventDefault ? event.preventDefault() : event.returnValue=false;
    }
  </script>

return false

• js事件中return false只会组织默认行为
• jquery事件中return false可以阻止冒泡和默认行为

 <div id="div" onclick="alert('div')">
    <ul onclick="alert('ul')">
      <li id="li_a" onclick="alert('li_a')">
        <a href="http://www.baidu.com" id="test">baidu</a>
      </li>
    </ul>
  </div>
  <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js" charset="utf-8"></script>
  <script type="text/javascript">
  //js
    var a = document.getElementById('test');
    a.onclick = function () {
      return false; //阻止默认行为
    }
  //jquery
    $('#test').click(function () {
      return false; //阻止冒泡和默认行为
    })
  </script>