html 冒泡事件拦截,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 元素响应这个事件。这样一来，单击按钮的事件会被按钮处理，而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩大全部区域。

三. 默许操作

如果我们把单击事件处理程序注册到一个锚元素，而不是一个外层的

上，那末就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。这类行动与我们讨论的事件处理程序不是同一个概念，它是单击锚元素的默许操作。类似地，当用户在编辑完表单后按下回车键时，会触发表单的 submit 事件，在此事件产生后，表单提交才会真正产生。

如果我们不希望履行这类默许操作，那末在事件对象上调用 .stopPropagation() 方法也杯水车薪，由于默许操作不是在正常的事件传播流中产生的。在这类情况下，.preventDefault() 方法则可以在触发默许操作之前终止事件。

提示当在事件的环境中完成了某些验证以后，通常会用到 .preventDefault()。例如，在表单提交期间，我们会对用户是不是填写了必填字段进行检查，如果用户没有填写相应字段，那末就需要禁止默许操作。我们将在第8章详细讨论表单验证。

事件传播和默许操作是相互独立的两套机制，在两者任何一方产生时，都可以终止另外一方。如果想要同时停止事件传播和默许操作，可以在事件处理程序中返回 false，这是对在事件对象上同时调用 .stopPropagation() 和 .preventDefault() 的一种简写方式。

html 冒泡事件拦截,Js 冒泡事件阻止相关推荐

js onfocus事件、js onblur事件
onfocus事件: html元素获取到焦点所触发的事件,通常用于 <input>输入框标签,<select>下拉列表标签,以及<a>超链接标签,不是所有html元 ...
JS的事件对象和事件冒泡
2019独角兽企业重金招聘Python工程师标准>>> 1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象 ...
html页面滚动条监听事件,滚动条的scroll事件
在vb中,滚动条的scroll 事件和change 事件的区别scroll和change的区别为:指代不同.用法不同.侧重点不同一.指代不同 scroll:滚屏,滚动. change:变更,变革. ...
java响应鼠标滚轮事件_鼠标滚轮事件MouseWheel
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
java冒泡函数解释,JS DOM操作函数事件阻止事件冒泡
一函数 1.字符串函数 s.tolowerCase( ): -- 变小写 s.toupperCase( ): -- 变大写 s.substr( 2 , 8 ): -- 截取 ...
js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载...
js添加事件.移除事件.阻止冒泡.阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 01 var addEvent = ...
Js、Vue阻止事件冒泡行为
目录 Js阻止事件冒泡行为 Vue阻止事件冒泡行为以下是Js阻止事件冒泡行为 event.stopPropagation() <!DOCTYPE html> <html lang= ...
html 冒泡事件拦截,JavaScript阻止事件冒泡与事件捕获
1.事件冒泡在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件. 事件冒泡依次输出:a.div.body 注意:不是所有的事件都能冒泡.blur.focus.loa ...
js 停止事件冒泡阻止浏览器的默认行为
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标 ...

html 冒泡事件拦截,Js 冒泡事件阻止

html 冒泡事件拦截,Js 冒泡事件阻止相关推荐

最新文章

热门文章