js阻止冒泡和默认事件（默认行为）详解-js教程-PHP中文网

首页

web前端

js教程

js阻止冒泡和默认事件（默认行为）详解

高洛峰

Dec 09, 2016 pm 03:23 PM

本文实例为大家分享了js阻止冒泡和默认事件方法，供大家参考，具体内容如下

阻止冒泡。冒泡简单的举例来说，儿子知道了一个秘密消息，它告诉了爸爸，爸爸知道了又告诉了爷爷，一级级传递从而引起事件的混乱，而阻止冒泡就是不让儿子告诉爸爸，爸爸自然不会告诉爷爷了。下面的domo就是很好的例子。

<!DOCTYPE html> 
<html> 
  
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
      #box { 
        width: 300px; 
        height: 300px; 
        background: red; 
        display: none; 
      } 
    </style> 
    <script type="text/javascript"> 
      window.onload = function() { 
          var btn = document.getElementById(&#39;btn&#39;); 
          var box = document.getElementById(&#39;box&#39;); 
          btn.onclick = function(ev) { 
            var oEvent = ev || event; 
            box.style.display = &#39;block&#39;; 
            //oEvent.cancelBubble = true;//高版本浏览器 
            stopBubble(oEvent); 
            //在低版本的chrome和firefox浏览器中需要兼容性处理 
            //高版本chrome和firefox浏览器直接使用上面这行代码即可 
          } 
          document.onclick = function() { 
            box.style.display = &#39;none&#39;; 
          } 
  
        } 
        //阻止冒泡事件的兼容性处理 
      function stopBubble(e) { 
        if(e && e.stopPropagation) { //非IE 
          e.stopPropagation(); 
        } else { //IE 
          window.event.cancelBubble = true; 
        } 
      } 
    </script> 
  </head> 
  
  <body> 
    <input type="button" id="btn" value="语言" /> 
    <div id="box"></div> 
  </body> 
  
</html>

我所实现的效果是：点击按钮btn让box显示，而点击其他地方则让box消失。
如果我不阻止冒泡的话，那么首先btn会触发点击时间，让盒子显示，但是由于box是包含在document中的，所以会向上冒泡又触发document的点击事件，盒子又消失。这个事件的执行顺序可以在不同的点击事件中使用alert来验证。关于cancelBubble的兼容性处理在高版本的chrome和firefox中已经不需要兼容处理了，直接使用oEvent.cancelBubble = true 即可。下面的阻止浏览器事件的兼容性处理在高版本浏览器中同样不需要。

默认事件。即浏览器本身具备的功能。

function preventDefa(e){
  if(window.event){
    //IE中阻止函数器默认动作的方式 
    window.event.returnValue = false; 
  }
  else{
    //阻止默认浏览器动作(W3C) 
    e.preventDefault();
  } 
}

这种是兼容性写法，但是如果你只需要支持高版本浏览器的话，那么如上文一样，一句话即可。

btn.onclick = function (){
  return false;
}

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。