在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF]
1.阻止事件冒泡,使成为捕获型事件触发机制.
function stopBubble(e) {
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation ){
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
} else {
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
2.当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.
//阻止浏览器的默认行为
function stopDefault( e ) {//console.log(e.preventDefault);
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault ){
//alert(e.preventDefault);
e.preventDefault();
} else { //IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
}
一般配合下面这个方法一起使用比较方便!
function addEvent(obj, sEvent, fn){
if(obj.attachEvent){
obj.attachEvent('on'+sEvent, fn);
}else{
obj.addEventListener(sEvent, fn, false);
}
}
分享到:
相关推荐
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e....
### 阻止浏览器的默认事件和冒泡 在网页开发过程中,经常需要处理各种用户交互行为,如点击、拖拽、键盘输入等。这些行为通常由浏览器默认处理,但有时候我们希望对某些操作进行自定义处理,这就涉及到阻止浏览器的...
在JavaScript中,我们经常需要阻止默认的浏览器行为和事件冒泡,以便实现自定义的功能。在前端开发中,由于浏览器的兼容性问题,理解和掌握这些技术至关重要。下面将详细介绍如何实现这两种功能。 1. **阻止浏览器...
在JavaScript中,有多种事件模型,包括事件冒泡(Bubble Phase)和捕获阶段(Capture Phase)。事件冒泡是最常见的一种,它始于事件目标元素(例如,用户点击的按钮),然后依次经过其所有父元素,直到到达文档的根...
在JavaScript中,处理事件时,有时我们需要控制事件的传播(冒泡)以及阻止浏览器执行其默认行为。本文将详细介绍如何实现这两个功能,并提供兼容不同浏览器的解决方案。 **停止冒泡** 事件冒泡是指事件从最深的...
综上所述,JavaScript中的阻止冒泡和阻止默认行为是非常重要的技术点,它们在处理复杂的事件监听和避免不必要的事件触发时发挥着重要的作用。理解并掌握这些技术对于提升前端开发的交互体验与代码质量具有重要意义。
本文将详细探讨jQuery中的两个重要概念:事件冒泡和阻止默认行为。通过具体的代码示例和解释,本文将帮助您理解和掌握如何在使用jQuery进行前端开发时,更好地控制页面上的事件交互。 1. 事件冒泡的概念与应用 事件...
在前端开发中,阻止默认浏览器行为和事件冒泡是常见的需求。所谓默认浏览器行为,指的是用户在浏览器中进行某些操作时,浏览器自身默认采取的响应。例如,点击一个链接时页面跳转,提交表单时页面刷新等。事件冒泡则...
本文将详细介绍如何使用原生JavaScript (JS) 和 jQuery 来阻止事件冒泡,并通过实际示例加深理解。 #### 二、JS 阻止事件冒泡的方法 ##### 1. 原生JS阻止事件冒泡 在原生JS中,阻止事件冒泡可以通过以下两种方式...
4. **阻止浏览器默认行为**: 通过事件对象,我们可以调用`preventDefault()`方法来阻止浏览器对特定事件的默认响应。例如,点击链接默认会跳转到新的URL,但通过`preventDefault()`,我们可以阻止这种跳转。 5. *...
在实际应用中,事件冒泡和捕获的区别可能会导致不同的行为。例如,当在一个包含多个嵌套元素的结构中添加事件监听器时,点击内部元素会依次触发所有祖先元素的事件。这可以通过在事件处理函数中使用`event....
但它并不直接阻止事件冒泡,只是防止事件的默认行为发生。 例如: ```javascript element.addEventListener('click', function(event) { event.preventDefault(); // 其他操作... }); ``` 在实际应用中,如果你...
在JavaScript中,我们经常需要对用户交互进行控制,例如点击按钮时执行自定义操作而不是触发浏览器的默认行为,或者防止事件从一个元素传播到其他元素。这就涉及到阻止事件的默认行为和阻止事件的传播。本篇文章将...
- 使用返回false的方式:在事件处理函数中直接返回false,这将同时阻止事件冒泡和事件的默认行为。例如:`$(selector).click(function() { return false; });` - 使用event.preventDefault()方法:这个方法用来...