`
liuyar
  • 浏览: 7021 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

给页面元素添加事件同时阻止冒泡

阅读更多

给页面元素添加事件时,我们需考虑浏览器的兼容问题,因为 addEventListener 只在 FF 中适用,而 attachEvent 只在 IE 中适用,同时冒泡事件也类似。

 

以下代码实现了 IE 与 FF 的兼容,在给页面元素添加事件的同时,阻止了冒泡。

 

var addEvent = function(o,event,func){
	var f = function(){};
	if(window.event){
		f = function(){
			func(window.event);
			window.event.stopPropagation();
		}
	}else{
		f = function(e){
			func(e);
			e.cancelBubble = true;
		}
	}
	if(o.addEventListener){
		o.addEventListener(event,f,false);
	}else if(o.attachEvent){
		o.attachEvent("on"+event,f);
	}else{
		o["on"+event] = f;
	}
}

 

分享到:
评论

相关推荐

    阻止滚动条事件冒泡

    标题中的“阻止滚动条事件冒泡”指的是在用户滚动页面某个部分时,阻止这个滚动事件向上传递到其他元素或窗口,特别是阻止`mousewheel`事件的冒泡。`mousewheel`事件通常用于处理鼠标滚轮滚动的行为,它在用户滚动...

    解决VUE框架 导致绑定事件的阻止冒泡失效问题

    Vue框架中绑定事件的阻止冒泡失效问题解决方案 在Vue框架中,绑定事件的阻止冒泡失效问题是一个常见的问题。当我们使用Vue框架时,因为框架内部对DOM的处理,导致绑定事件的阻止冒泡失效。下面我们将探讨这个问题的...

    JavaScript捕捉事件和阻止冒泡事件实例分析

    标题中提到的“JavaScript捕捉事件和阻止冒泡事件实例分析”,明确指出了本文将涉及两个关键的JavaScript事件处理机制:事件捕捉和阻止事件冒泡。在描述中,提到了冒泡原理和相关的操作技巧,这说明将通过对实例的...

    JavaScript事件冒泡示例.html

    事件冒泡的核心在于,如果一个元素嵌套在另一个元素中,当最内层的元素发生事件时,事件会首先在这个元素上触发,然后依次传递给它的所有父元素,直到页面的根元素。这种机制允许开发者在一个父元素上监听并处理所有...

    Js冒泡事件详解及阻止示例

    对于使用jQuery的情况,可以直接在事件处理函数内调用`event.stopPropagation()`,或者返回`false`以同时阻止冒泡和默认行为。 在实际应用中,事件冒泡可能导致不期望的行为,比如多个事件处理函数被意外触发。因此...

    js利用事件的阻止冒泡实现点击空白模态框的隐藏

    这就涉及到一个常用的技术手段——事件的阻止冒泡。 事件冒泡是JavaScript事件模型中的一种机制,当一个元素上的事件被触发后(例如点击),这个事件不仅会在该元素上触发,还会向上冒泡到更外层的元素,直到到达...

    js阻止默认浏览器行为与冒泡行为的实现代码.docx

    在Prototype库中,可以使用`Event.stop(event)`来同时阻止默认行为和事件冒泡。 **事件冒泡与默认行为的实际应用**: 在某些情况下,如表单提交或链接点击,浏览器有默认的行为,如打开新页面或提交数据。如果希望...

    js事件监听机制(事件捕获)总结

    使用addEventListener方法为元素添加事件监听是推荐的方式,因为它允许为同一个元素的同一个事件添加多个监听器,而且不会覆盖之前添加的监听器。而直接在对象上赋值事件处理器的方式则有限制,通常只能绑定一个函数...

    简析JavaScript事件、以及捕获和冒泡

    然而,事件捕获有时在需要尽早处理事件或阻止冒泡的情况下很有用。例如,可以使用捕获来阻止不必要的事件传播,或者在父元素上处理多个子元素共享的事件。 在实际开发中,理解事件冒泡和捕获的差异对于优化性能和...

    js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

    - 如果需要同时阻止默认行为和事件冒泡,可以结合使用`preventDefault()`和`stopPropagation()`。 ### JS事件查询工具 在实际开发中,了解各种JavaScript事件及其功能非常重要。推荐使用在线查询工具,如`...

    js 冒泡事件

    阻止冒泡 有时我们需要阻止事件冒泡,以免影响到父元素的事件处理。这可以通过在事件处理函数中调用`event.stopPropagation()`来实现。这样,事件就不会继续向上层元素传播。 ### 4. HTMLMaopao.html文件分析 `...

    阻止子元素继承父元素事件具体思路及实现

    2. 在事件处理器内部调用阻止冒泡的方法,如`event.stopPropagation()`或`window.event.cancelBubble = true;`。 3. 确保在父元素的事件处理器中,不需要处理来自子元素的事件。 通过这种方法,我们可以确保点击`#p...

    添加事件

    此外,还可以通过`event.preventDefault()`阻止默认行为,通过`event.stopPropagation()`阻止事件冒泡。 总之,"添加事件"是前端开发中不可或缺的部分,它使得网页能够响应用户的交互,提升用户体验。理解并熟练...

    Javascript 事件冒泡机制详细介绍

    在结束事件冒泡的过程中,必须注意的是,阻止冒泡并不意味着阻止了事件的默认行为,这两者是完全独立的概念。如果需要同时阻止事件冒泡和默认行为,我们需要在事件处理函数中分别调用event.stopPropagation()和event...

    js单击事件和双击事件并存绑定

    问题在于,当这两种事件同时存在时,如果用户快速连续点击两次,可能会触发单击事件后立即触发双击事件,导致预期的行为混乱。为了解决这个问题,我们需要一种策略来确保两个事件可以正确地并存。 这里我们引入了一...

    js之事件冒泡,事件捕获,事件委托

    此时,可以使用`event.stopPropagation()`方法,它会阻止事件继续向上冒泡,确保事件处理仅在当前元素内完成,不会影响到父级元素。 总的来说,事件冒泡和事件捕获是JavaScript中处理事件传播的两种模式,它们提供...

    jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

    在上述代码中,当页面加载完成后(`$(function () {...})`是jQuery的文档就绪事件),`#div1`元素被绑定了两个事件:`mouseover`和`click`。当用户将鼠标移到`#div1`上或点击它时,事件处理器会显示元素的HTML内容,...

    微信小程序冒泡事件及其阻止方法实例分析

    在微信小程序中,事件处理是页面交互的核心,而冒泡事件和阻止冒泡则是事件处理中的重要概念。本文将深入探讨微信小程序中的冒泡事件及其阻止方法,通过实例解析事件的分类、冒泡机制以及如何阻止事件冒泡。 首先,...

Global site tag (gtag.js) - Google Analytics