浅谈javascript事件取消和阻止冒泡

这篇文章主要介绍了浅谈javascript事件取消和阻止冒泡的方法和示例,有需要的小伙伴可以参考下。
 
 

取消默认操作

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

在支持addEventListener()的浏览器中,也能通过调用时间对象的preventDefault()方法取消时间的默认操作。不过,在IE9之前的IE中,可以通过设置事件对象的returnValue属性为false来达到同样的效果。下面的代码假设一个事件处理程序,它使用全部的三种取消技术:

?

1
2
3
4
5
6

function cancelHandler(event){
var event = event || window.event; //用于IE
if(event.preventDefault) event.preventDefault(); //标准技术
if(event.returnValue) event.returnValue = false; //IE
return false; //用于处理使用对象属性注册的处理程序
}

当前的DOM事件模型草案定义了Event对象属性defaultPrevented。

return false

javascript的return false只会阻止默认行为,而是用jQuery的话则既阻止默认行为又防止对象冒泡。

下面这个使用原生JS,只会阻止默认行为,不会停止冒泡

 

 代码如下:

<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li id='ul-a' onclick='alert("li");'><a href="http://caibaojian.com/"id="testB">caibaojian.com</a></li>
</ul>
</div>
var a = document.getElementById("testB");
a.onclick = function(){
return false;
};

 

阻止冒泡

w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true

在支持addEventListener()的浏览器中,可以调用事件对象的一个stopPropagation()方法已阻止事件的继续传播。如果在同一对象上定义了其他处理程序,剩下的处理程序将依旧被调用,但调用stopPropagation()方法可以在事件传播期间的任何时间调用,它能工作在捕获阶段、事件目标本身中和冒泡阶段。

IE9之前的IE不支持stopPropagation()方法。相反,IE事件对象有一个cancleBubble属性,设置这个属性为true能阻止事件进一步传播。(IE8及之前版本不支持事件传播的捕获阶段,所以冒泡是唯一待取消的事件传播。)

当前的DOM事件规范草案在Event对象上定义了另一个方法,命名为stopImmediatePropagation()。类似stopPropagation(),这个方法组织了任何其他对象的事件传播,但也阻止了在相同对象上注册的任何其他事件处理程序的调用。

 

代码如下:

<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li onclick='alert("li");'>test</li>
</ul>
</div>

 

阻止冒泡

 

 代码如下:

function stopHandler(event)
window.event?window.event.cancelBubble=true:event.stopPropagation();
}

 

以上所述上就是本文的全部内容了,希望大家能够喜欢。

 

时间: 2024-09-30 09:14:42

浅谈javascript事件取消和阻止冒泡的相关文章

浅谈javascript事件取消和阻止冒泡_javascript技巧

取消默认操作 w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false; 在支持addEventListener()的浏览器中,也能通过调用时间对象的preventDefault()方法取消时间的默认操作.不过,在IE9之前的IE中,可以通过设置事件对象的returnValue属性为false来达到同样的效果.下面的代码假设一个事件处理程序,它使用全部的三种取消技术: function cancelHandler(event){ var even

浅谈JavaScript事件绑定的常用方法及其优缺点分析_javascript技巧

传统方式  element.onclick = function(e){ // ... };  1.  传统绑定的优点 非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致 处理事件时,this关键字引用的是当前元素,这很有帮组 2. 传统绑定的缺点 传统方法只会在事件冒泡中运行,而非捕获和冒泡 一个元素一次只能绑定一个事件处理函数.新绑定的事件处理函数会覆盖旧的事件处理函数 事件对象参数(e)仅非IE浏览器可用 W3C方式  element.addEventListener('click'

浅谈JavaScript事件的属性列表

  本文向大家简单介绍了javascript事件的属性列表,非常的详细,推荐给有相同需求的小伙伴们. HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为. 属性 此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事件句柄. on

浅谈Javascript事件处理程序的几种方式_javascript技巧

事件就是用户或浏览器自身执行的某种动作.比如说click,mouseover,都是事件的名字.而相应某个事件的函数就叫事件处理程序(或事件侦听器).为事件指定处理程序的方式有好几种. 一:HTML事件处理程序. 如: 复制代码 代码如下: <script type="text/javascript"> function show(){ alert('hello world!'); } </script> <input type="button&q

浅谈Javascript事件模拟_javascript技巧

这就意味着会有适当的事件冒泡,并且浏览器会执行分配的事件处理程序.这种能力在测试web应用程序的时候,是非常有用的,在DOM 3级规范中提供了方法来模拟特定的事件,IE9 chrome FF Opera 和 Safari都支持这样的方式,在IE8及以前的办法的IE浏览器有他自己的方式来模拟事件 a)Dom 事件模拟 可以通过document上的createEvent()方法,在任何时候创建事件对象,此方法只接受一个参数,既要创建事件对象的事件字符串,在DOM2 级规范上所有的字符串都是复数形式,

浅谈JavaScript事件的属性列表_基础知识

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为.   属性 此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事件句柄. ondblclick 当用户双击某个对象时调用的事件句柄. onerror 在加载文档或图像时发生错误

浅谈javascript中this在事件中的应用

 这篇文章主要介绍了浅谈javascript中this在事件中的应用实例,非常有助于我们对this关键字的理解,这里推荐给大家.     this关键字在javascript中是非常强大的,但是如果你不清楚它是怎么工作的就很难使用它.   代码如下: function dosomething(){ this.style.color="#fff"; }   上面这段代码中的this指向什么呢,运行dosomething()会输出什么呢? 在javascript中,this总是指向当前执行

浅谈Javascript线程及定时机制

  这篇文章主要介绍了浅谈Javascript线程及定时机制的相关资料,需要的朋友可以参考下 setTimeout.setInterval的使用 Javascript api文档中定义setTimeout和setInterval第二个参数意义分别为间隔多少毫秒后回调函数被执行和每隔多少毫秒回调函数被执行.但随着工作经验的积累,我们发现事实并非如此. 比如 ? 1 2 3 4 5 div.onclick=function(){ setTimeout(function(){ document.get

浅谈javascript属性onresize

  这篇文章主要介绍了浅谈javascript属性onresize的详细使用方法,十分的实用,这里推荐给大家,有需要的小伙伴可以参考下. 浅谈javascript属性onresize ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 //获取屏幕宽度并动态赋值 var winWidth = 0; var winHeight = 0; function findDimensio