js阻止默认行为和阻止事件冒泡

js阻止默认行为和阻止事件冒泡

一.阻止浏览器的默认行为

 preventDefault方法的起什么作用呢？我们知道比如<a href=" http://www.baidu.com/ ">百度</a>,这是html中最基础的东西，起的作用就是点击百度链接到 http://www.baidu.com/ ,这是属于<a>标签的默认行为，而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。

<a href="http://www.baidu.com/" id="tes" οnclick="testzuzhi(event);">百度</a> 

 function testzuzhi(event){
 if (event && event.preventDefault ) {
	 event.preventDefault();
		 }else{
 window.event.returnValue = false; 
		 }
}

此时点击百度链接，不会跳到 http://www.baidu.com/

二.阻止事件冒泡

 事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说，其目标元素都是原始元素，在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。

     stopPropagation方法就是起到阻止js事件冒泡的作用

<div id='div'  οnclick='alert("hello div");'>

  <ul  οnclick='alert("hello ul");'>

     <li οnclick='alert("hello li");'>hello world</li>

  </ul>

</div>

当单击hello world时，会依次触发alert(“hello li”),alert(“hello ul”),alert(“hello div”)，这就是事件冒泡。
当需要 阻止冒泡时，就得使用stopPropagation

<div id='div'  οnclick='alert("hello div");' >

  <ul  οnclick='alert("hello ul");'>

    <li id='ul-a' οnclick='zuzhimaopao(event);'>hello world</li>

  </ul>

</div>

function stopP(e)
	{
		var evt = e || window.event;
		//IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法
		evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble=true);
	}


function zuzhimaopao(event){
 alert("hello li");
  stopP(event);
}

此时点击hello world,只会弹出"hello li"的alert

三.return false

在jQuery中使用return false时，相当于同时使用event.preventDefault和event.stopPropagation，它会阻止冒泡也会阻止默认行为。但是使用原生js写时，return false只会阻止默认行为。

<div id='div'  οnclick='alert("hello div");'>

  <ul  οnclick='alert("hello ul");'>

     <li id='ul-a' οnclick='alert("hello li");'><a href="http://www.baidu.com" id="testfalse">百度</a></li>

  </ul>

</div>

$("#testfalse").on('click',function(){

 return false;

});

此时点击百度不会跳转到"http://www.baidu.com",只弹出hello li的alert