js阻止冒泡事件及默认操做

1. 事件目标

如今，事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，可是没有被全部浏览器实现 。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都可以使用这个属性。经过.target，能够肯定DOM中首先接收到事件的元素（即实际被单击的元素）。并且，咱们知道this引用的是处理事件的DOM元素，因此能够编写下列代码：

// 修改前
$('#switcher').click(function(event){
    $('#switcher .button').toggleClass('hidden');
})

// 修改后
$('#switcher').click(function(event){
    if(event.target==this){
        $('#switcher .button').toggleClass('hidden');
    }
})

此时的代码确保了被单击的元素是<div id="switcher"> ，而不是其余后代元素。

2. 中止事件传播

事件对象还提供了一个.stopPropagation()方法，该方法能够彻底阻止事件冒泡。与.target相似，这个方法也是一种纯JavaScript特性，但在跨浏览器的环境中则没法安全地使用 。不过，只要咱们经过jQuery来注册全部的事件处理程序，就能够放心地使用这个方法。

下面，咱们会删除刚才添加的检查语句event.target == this，并在按钮的单击处理程序中添加一些代码：

$('#switcher .button').click(funtion(event){
    // ...
    event.stopPropagation();
})

同之前同样，须要为用做单击处理程序的函数添加一个参数，以便访问事件对象。而后，经过简单地调用event.stopPropagation()就能够避免其余全部DOM元素响应这个事件。

3. 默认操做

若是咱们把单击事件处理程序注册到一个锚元素，而不是一个外层的<div>上，那么就要面对另一个问题：当用户单击连接时，浏览器会加载一个新页面。这种行为与咱们讨论的事件处理程序不是同一个概念，它是单击锚元素的默认操做。相似地，当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。

若是咱们不但愿执行这种默认操做，那么在事件对象上调用.stopPropagation()方法也无济于事，由于默认操做不是在正常的事件传播流中发生的。在这种状况下，.preventDefault()方法则能够在触发默认操做以前终止事件 。

提示 当在事件的环境中完成了某些验证以后，一般会用到.preventDefault()。例如，在表单提交期间，咱们会对用户是否填写了必填字段进行检查，若是用户没有填写相应字段，那么就须要阻止默认操做。

若是想要同时中止事件传播和默认操做，能够在事件处理程序中返回false，这是对在事件对象上同时调用.stopPropagation()和.preventDefault()的一种简写方式。