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

javascrip阻止事件冒泡的通用函数

HTML 
阅读更多

javascrip阻止事件冒泡的通用函数:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
       <div id="d">kkkkkkkkkk</div>
       <li>aa</li>
     <div>
          <li>aa</li>
    </div>
<script>
//阻止事件冒泡的通用函数
function stopBubble(e){
   if(e&&e.stopPropagation){
       e.stopPropagation();
   }else{
       window.event.cancelBubble=true;
  }
}
//定位遍历所有DOM元素
var all=document.getElementsByTagName("*");

for(var i=0;i<all.length;i++){
 all[i].onmouseover=function(e){
      this.style.border="1px solid red";
     stopBubble(e);
 };

 

 all[i].onmouseout=function(e){
      this.style.border="0px";
     stopBubble(e);
 };
}
</script>
</body>
</html>

分享到：
| 浅谈如何删除JSP编译后的空行
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Javascript 阻止javascript事件冒泡，获取控件ID值

    事件冒泡和获取控件ID值是JavaScript事件处理中的两个重要概念，对于理解JavaScript事件模型以及创建交互式网页至关重要。以下是关于这两个概念的详细说明： 1. **事件冒泡** 事件冒泡是指事件开始时由最具体的元素...

    在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。

    这个事件处理函数的特点是它在每个对象上只会执行一次，类似于JavaScript的`addEventListener`方法的第三个参数为`once`时的效果。此外，它还提及了如何阻止浏览器的默认行为以及如何控制事件的冒泡。 1. **事件...

    事件冒泡及捕获

    这种机制允许事件处理函数在任何层级的祖先元素上定义，从而可以实现一种通用的事件处理方式。例如，你可以为页面上的一个容器元素设置点击事件监听器，而这个容器包含许多子元素，这样当任何子元素被点击时，都会...

    重新认识vue之事件阻止冒泡的实现

    解决这个问题的一种通用方法是使用JavaScript的`event.stopPropagation()`方法，它可以阻止事件继续向上层元素传播。然而，由于不同浏览器的差异，需要编写兼容性代码来确保在所有浏览器中都能正确工作。例如，IE...

    JavaScript事件对象深入详解

    此外，通过`event.type`属性，可以编写通用的事件处理函数，以处理多种类型的事件。这在需要对一组元素应用相同逻辑时特别有用。 在IE和其他非DOM兼容的浏览器中，事件对象的处理方式略有不同，有时需要通过全局...

    Js 冒泡事件阻止实现代码

    JavaScript中的事件冒泡是一种事件处理机制，当一个元素上的事件被触发后，这个事件不仅仅在当前元素上处理，还会传播到它的所有父元素，除非在这个过程中事件被明确地阻止。冒泡事件在Web开发中非常重要，因为它们...

    javascript mouseover、mouseout停止事件冒泡的解决方案

    在JavaScript中，我们经常需要控制事件冒泡的行为，以便让事件处理函数正确响应或者阻止不必要的事件传递。 对于事件冒泡的控制，我们可以通过调用事件对象的`stopPropagation()`方法来阻止事件继续传播。然而，...

    javascript动态添加事件.pdf

    JavaScript 动态添加事件是网页开发中常见的需求，主要用于实现交互功能。在不同的浏览器中，实现方式略有差异，主要涉及到IE浏览器与非IE浏览器的兼容性问题。以下是关于JavaScript动态添加事件的一些关键知识点： ...

    javascript 添加和移除函数的通用方法

    在这个函数中，我们首先检查节点是否具有addEventListener方法，如果有，使用W3C标准方法来添加事件监听器，并通过指定第三个参数为false来表示我们添加的是冒泡阶段的事件监听器，因为IE不支持捕获阶段的事件监听器...

    jquery_tips，JQ实现的冒泡提示

    接着，使用$("#elementID").hover()方法监听元素的鼠标悬停事件，其中hover()函数接收两个参数，分别对应鼠标进入和离开元素时的回调函数。在这些回调函数中，我们可以使用.show()和.hide()方法来控制提示框的显示和...

    javascript事件处理模型实例说明

    本文详细介绍了JavaScript事件处理模型，重点讲述了Internet Explorer（IE）和Mozilla Firefox（火狐）这两款主流浏览器在添加和删除事件监听器方面的差异，以及提供了一个通用的解决方案，从而允许开发者能够编写...

    JavaScript实现为事件句柄绑定监听函数的方法分析

    为了确保代码在所有浏览器中都能正常工作，开发者通常会创建一个通用的事件绑定函数，如`addEvent`。这个函数会检查浏览器类型，然后根据浏览器特性选择合适的绑定方法。`addEvent`会为每个监听器生成唯一的标识符...

    javascript打造跨浏览器事件处理机制[Blue-Dream出品]

    为了兼容W3C标准和IE浏览器，开发者们通常会创建一些通用的函数来添加和移除事件监听器。以下是一个示例函数，用于添加事件监听： ```javascript function addListener(element, eventName, handler) { if ...

    javascript面试题汇总.pdf

    11. **阻止事件冒泡和默认事件：** 阻止事件冒泡可以避免事件处理器被多个元素捕获，IE浏览器使用event.cancelBubble=true，而非IE浏览器使用event.stopPropagation()。阻止默认事件则是阻止元素的默认行为，例如...

    JavaScript实现跨浏览器的添加及删除事件绑定函数实例

    这个方法同样接受三个参数，但第三个参数可选，表示是否阻止事件冒泡。对于这些浏览器，添加事件绑定的代码如下： ```javascript function bindForOthers(obj, type, fn) { obj.addEventListener(type, fn, false)...

    Javascript经典封装代码

    - 封装事件委托：利用事件冒泡或捕获机制，减少事件监听器的数量，优化性能。 10. **Ajax请求** - 封装Ajax请求：包括XMLHttpRequest或Fetch API，处理异步数据交换，提供统一的接口。 以上这些封装代码涵盖了...

    js停止冒泡和阻止浏览器默认行为的简单方法

    **停止冒泡通用方法：** 为了停止事件冒泡，我们可以使用event对象的stopPropagation()方法。这个方法属于W3C标准，因此兼容现代浏览器。但是，在旧版IE浏览器中，我们需要通过设置window.event的cancelBubble属性为...

    通用脚本样式总结使用

    - 事件冒泡与捕获：理解事件传播机制，如何阻止默认行为（`event.preventDefault()`）。 - 事件委托：利用事件冒泡，为父元素添加事件监听，处理子元素的事件。 5. **动画效果**： - CSS动画：利用`@keyframes`...

    jquery实现点击指定div外区域隐藏该div

    - **性能优化**：如果页面中有多个类似的交互需求，可以考虑封装一个通用的函数来管理这些事件，避免重复代码。 - **用户体验**：对于触摸设备，可能还需要处理触摸事件，确保在不同类型的设备上都能正常工作。 - **...

Magicbox
Global site tag (gtag.js) - Google Analytics