Js冒泡事件阻止的方法是什么
这篇文章主要介绍"Js冒泡事件阻止的方法是什么"的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇"Js冒泡事件阻止的方法是什么"文章能帮助大家解决问题。
一. 事件目标
现在,事件处理程序中的变量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');
}
})
})
此时的代码确保了被单击的元素是
二. 停止事件传播
事件对象还提供了一个 .stopPropagation() 方法,该方法可以完全禁止事件冒泡。与 .target 类似,这个方法也是一种纯 JavaScript 特性,但在跨浏览器的环境中则没法安全地使用 。不过,只要我们通过jQuery来注册所有的事件处理程序,就能够放心肠使用这个方法。
下面,我们会删除刚才添加的检查语句 event.target == this,并在按钮的单击处理程序中添加一些代码:
$(document).ready(function(){
$('#switcher .button').click(funtion(event){
//……
event.stopPropagation();
})
})
同之前一样,需要为用作单击处理程序的函数添加一个参数,以便访问事件对象。然后,通过简单地调用 event.stopPropagation() 就能够避免其他所有 DOM 元素响应这个事件。这样一来,单击按钮的事件会被按钮处理,而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩大全部区域。
三. 默许操作
如果我们把单击事件处理程序注册到一个锚元素,而不是一个外层的
如果我们不希望履行这类默许操作,那末在事件对象上调用 .stopPropagation() 方法也杯水车薪,由于默许操作不是在正常的事件传播流中产生的。在这类情况下,.preventDefault() 方法则可以在触发默许操作之前终止事件 。
提示 当在事件的环境中完成了某些验证以后,通常会用到 .preventDefault()。例如,在表单提交期间,我们会对用户是不是填写了必填字段进行检查,如果用户没有填写相应字段,那末就需要禁止默许操作。我们将在第8章详细讨论表单验证。
事件传播和默许操作是相互独立的两套机制,在两者任何一方产生时,都可以终止另外一方。如果想要同时停止事件传播和默许操作,可以在事件处理程序中返回 false,这是对在事件对象上同时调用 .stopPropagation() 和 .preventDefault() 的一种简写方式。
关于"Js冒泡事件阻止的方法是什么"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注行业资讯频道,小编每天都会为大家更新不同的知识点。