JS停止冒泡和阻止浏览器默认行为及jquery封装的事件函数 - wkyseo/blog GitHub Wiki

w3c的方法是event.stopPropagation()，IE是使用event.cancelBubble = true.

stopPropagation也是事件对象 (event)的一个方法，作用是阻止目标元素的冒泡事件，但是不会阻止浏览器的默认行为。冒泡事件：事件会按照DOM的层次结构像水泡一样不断向上直至顶端。

内层span元素被单机

外层div元素被单机

body元素被单机

如果删除event.stopPropagation()事件就会冒泡，调用的是jquery方法，jquery封装了方法：stopPropagation()，免除了IE等各类浏览器的判断。

JS原生代码如下：

function stopBubble(e){
	if(e&&e.stopPropagation){
		//W3C支持的stopPropagation()
		e.stopPropagation;
	}else{
		//IE下的阻止事件冒泡方式
		window.event.cancelBubble = true;
	}
}

w3c的方法是event.preventDefault(),IE则是使用event.returnValue = false.

preventDefault()是事件对象（event）的一个方法，作用是取消一个目标元素的默认行为，既然是默认行为，当然是元素必须有默认行为才能被取消，调用的行为和方法无效，有默认行为的元素，如连接a，input type=subbmit。当event对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault同样不会起作用。

JS原生代码如下：

//假定有链接<a href="http://www.wkyseo.com/" id="test">wkyseo.com</a>
function stopDefault(e){
    var a = docunmet.getElementByID("test");
    a.onclick = function(){
	    if(e&&e.preventDefaul){
	    e.preventDefaul;
	    }else{
	    window.event.returnValue = false;
	    }
    }
}

jquery阻止默认行为直接调用preventDefault()，jquery对其进行了封装，使之能兼容各类浏览器。

javascript的return false只会阻止默认行为，而使用jquery的话既阻止默认行为又防止对象冒泡。

jquery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断。

a. event.type()方法

该方法的作用可以获取到事件的类型，比如元素a的点击事件，event.type = "click"。

b. event.preventDefault()方法

c. event.stopPropagation()方法

d. event.target()方法

event.target()方法是获取到触发事件的元素。jquery对其封装后，避免了W3C、IE和safari浏览器不同标准的差异。

$("a[href=www.wkyseo.com]").click(function(event){
	alert(event.target.href);
	return false;//阻止连接跳转
}) 

代码运行后会返回：“www.wkyseo.com”。

e.event.pageX()方法/event.pageY()方法

获取到光标相对于页面的X坐标和Y坐标，没有使用jquery时，IE下使用event.x()/event.y()，firefox用event.pageX()/event.pageY()。如果页面上有滚动条，还需加上滚动条的宽度和高度。在IE浏览器减去默认的2px的边框。

f.event.relatedTarget()方法

g.event.which()方法

在鼠标单击事件（mousedown）中获取到鼠标的左、中、右键；在键盘事件获取键盘的按键。

h.event.metaKey()方法

i.event.originalEvent()方法

1. event代表事件的状态，例如出发event对象的元素、鼠标的位置及状态、按下的键等。
2. event对象只在事件发生的过程中才有效。firefox里的event跟IE不同，IE里的是全局变量，随时可用；firefox需用参数引导，为运行时的临时变量。在IE/Opera中是window.event，在firefox则是event；而事件的对象，IE使用window.event.srcElement,在Firefox中是event.target，opera都可以。