Js 冒泡事件阻止
2013-08-23 13:57
183 查看
Js 冒泡事件阻止
JS阻止冒泡方法
博客分类:javascript
JS事件流其中一种是冒泡事件,当一个元素被触发一个事件时,该目标元素的事件会优先被执行,然后向外传播到每个祖先元素,恰如水里的一个泡泡似的,从产 生就一直往上浮,到在水平面时,它才消失。在这个过程中,如果你只希望事件发生在目标元素,而不想它传播到祖先元素上去,那么你需要在“泡泡”离开对象之 前刺破它。
我在文档中写了一个层,<div
id="need_hide">点击以外隐藏该层</div>,并为之设置了简单的样式,现在我希望点击该层以外的地方使之隐藏,那么
我给根元素绑定了一个click事件,一点击html就隐藏该DIV,代码如下:
Javascript代码
document.documentElement.onclick = function() {
document.getElementById('need_hide').style.display = 'none';
}
但是点击该层后,也使之隐藏了,这不是我希望得到的效果。由于该层属于根元素的子节点,所以它也被绑定了这个click事件,那么需在该元素被click时阻止冒泡事件的发生,加上以下代码:
Javascript代码
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
document.getElementById('need_hide').onclick = function(e) {
stopPropagation(e);
}
如果还想增加一个链接:<a href="#" id="btn_show">显示层</a>,用它来控制该层显示出来,那么仍然需要在该链接被点击时阻止冒泡事件的发生,加上以下代码:
Javascript代码
document.getElementById('btn_show').onclick = function(e) {
document.getElementById('need_hide').style.display = 'block';
stopPropagation(e);
}
1. 事件目标
现在,事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的,但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性。通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素)。而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码:
$(document).ready(function(){
$('#switcher').click(function(event){
$('#switcher .button').toggleClass('hidden');
})
})
$(document).ready(function(){
$('#switcher').click(function(event){
if(event.target==this){
$('#switcher .button').toggleClass('hidden');
}
})
})
此时的代码确保了被单击的元素是<div id="switcher"> ,而不是其他后代元素。现在,单击按钮不会再折叠样式转换器,而单击边框则会触发折叠操作。但是,单击标签同样什么也不会发生,因为它也是一个后代元素。实际上,我们可以不把检查代码放在这里,而是通过修改按钮的行为来达到目标 。
2. 停止事件传播
事件对象还提供了一个.stopPropagation()方法,该方法可以完全阻止事件冒泡。与.target类似,这个方法也是一种纯JavaScript特性,但在跨浏览器的环境中则无法安全地使用 。不过,只要我们通过jQuery来注册所有的事件处理程序,就可以放心地使用这个方法。
下面,我们会删除刚才添加的检查语句event.target == this,并在按钮的单击处理程序中添加一些代码:
$(document).ready(function(){
$('#switcher .button').click(funtion(event){
//……
event.stopPropagation();
})
})
同以前一样,需要为用作单击处理程序的函数添加一个参数,以便访问事件对象。然后,通过简单地调用event.stopPropagation()就可以避免其他所有DOM元素响应这个事件。这样一来,单击按钮的事件会被按钮处理,而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩展整个区域。
3. 默认操作
如果我们把单击事件处理程序注册到一个锚元素,而不是一个外层的<div>上,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面。这种行为与我们讨论的事件处理程序不是同一个概念,它是单击锚元素的默认操作。类似地,当用户在编辑完表单后按下回车键时,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。
如果我们不希望执行这种默认操作,那么在事件对象上调用.stopPropagation()方法也无济于事,因为默认操作不是在正常的事件传播流中发生的。在这种情况下,.preventDefault()方法则可以在触发默认操作之前终止事件 。
提示 当在事件的环境中完成了某些验证之后,通常会用到.preventDefault()。例如,在表单提交期间,我们会对用户是否填写了必填字段进行检查,如果用户没有填写相应字段,那么就需要阻止默认操作。我们将在第8章详细讨论表单验证。
事件传播和默认操作是相互独立的两套机制,在二者任何一方发生时,都可以终止另一方。如果想要同时停止事件传播和默认操作,可以在事件处理程序中返回false,这是对在事件对象上同时调用.stopPropagation()和.preventDefault()的一种简写方式。
相关文章推荐
- js 事件冒泡详解、 捕获、阻止方法
- Js 冒泡事件阻止
- js中阻止默认事件,阻止冒泡事件
- js阻止事件冒泡和标签默认行为
- 原声js 的兼容(屏幕尺寸、事件处理程序、阻止事件冒泡、事件目标等等)
- js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
- 标签中事件在js中获取,阻止冒泡和默认事件。兼容ie
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- 阻止js事件冒泡
- js中事件冒泡及阻止冒泡的一小段code
- Js阻止事件冒泡和document.onclick在IE浏览器上无效
- js 阻止事件冒泡
- JS,Jquery中事件冒泡以及阻止事件冒泡方法
- 【js】js阻止元素事件的冒泡
- js核心基础之Events事件机制(事件冒泡、事件捕获、事件执行顺序、阻止冒泡)
- js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
- js事件 封装方法(添加事件、删除事件、阻止冒泡、阻止默认行为)
- js冒泡、捕获事件及阻止冒泡方法
- js阻止冒泡事件
- 关于Js事件冒泡及阻止事件冒泡