js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数

最新推荐文章于 2023-02-21 20:03:00 发布
最新推荐文章于 2023-02-21 20:03:00 发布
阅读量349 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/tongbiao/p/6801392.html
版权

<!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('btn');
          var box = document.getElementById('box');
          btn.onclick = function(ev) {
            var oEvent = ev || event;
            box.style.display = 'block';
            //oEvent.cancelBubble = true;//高版本浏览器
            stopBubble(oEvent);
            //在低版本的chrome和firefox浏览器中需要兼容性处理
            //高版本chrome和firefox浏览器直接使用上面这行代码即可
          }
          document.onclick = function() {
            box.style.display = 'none';
          }
  
        }
        //阻止冒泡事件的兼容性处理
      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>

 

jquery DefaultPrevented转载▼

  

阻止默认事件行为的触发。

例如，在执行这个方法后，如果点击一个锚点，就不会让浏览器跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)调用过了。

 

<!DOCTYPE html>
 

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  </head>
  <body>
      <a href="http://www.3qhouse.com">default click action is prevented</a>
      <div id="log"></div>
       <script>
            $("a").click(function(event) {
               event.preventDefault();
               $('<div/>').append('default ' + event.type + ' prevented').appendTo('#log');
             });
       </script>
    </body>
  </html>


说明：对超级链接“<a>” ,就有自身默认的跳转到新的URL行为，一旦给添加了js的点击事件，那么执行顺序是，首先执行click这个点击事件，然后才执行 “<a>”的默认行为。
所以上面的示例中点击之后，首先执行了jquery的click事件，而在click事件处理方法中通过event.preventDefaule()阻止了 默认的行为。

转载于:https://www.cnblogs.com/tongbiao/p/6801392.html

weixin_34255793
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js事件函数stopBubble, stopDefault
guiguiann789的博客
04-06 1236
stopBubble() 功能：阻止事件冒泡 function stopBubble(e){ //如果提供了事件对象，则这是一个非IE浏览器 if(e.stopPropagation){ //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); }else{ //否则，我们需要使用IE的方式来取消事件冒泡 e.cancelBubble=true; } ...
阻止事件默认行为
最新发布
Ghmin的博客
12-03 578
如何阻止默认事件？方法一：全支持 event.preventDefault();// 方法二：该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。 event.returnValue = false;// 方法三：不建议滥用，jQuery 中可以同时阻止冒泡和默认事件 return false;
js DOM 事件模型
weixin_33972649的博客
12-25 220
https://www.jianshu.com/p/3ac912a5a1f8 Dom事件事件是一种异步编程的实现方式，本质上是程序各个组成部分之间的通信。DOM支持大量的事件(一) EventTarget接口DOM的事件操作（监听和触发），都定义在EventTarget接口。Element节点、document节点和window对象，都部署了这个接口。EventTarget...
js 事件
zxnth的博客
12-09 176
事件与事件流 事件介绍 JavaScript 和 HTML 之间的交互是通过当用户或者浏览器操作网页时发生的事件来处理的。页面装载时，是一个事件，用户点击页面上的某个按钮时，也是一个事件。 在早期拨号上网的年代，如果所有的功能都放在服务器端进行处理的话，效率是非常低的。所以 JavaScript 最初被设计出来就是用来解决这些问题的。通过允许一些功能在客户端处理，以节省到服务器的往返时间。 Jav...
preventDefault与stopPropagation的作用
u010565037的博客
10-19 8844
如题，本篇文章讨论preventDefault和stopPropagation二者的作用，首先，先理解一下二者的字面意思： 一、preventDefault，prevent是动词，意为“防止，阻止”；Default是名词，有“系统默认值”的意思，preventDefault在js中的意思就是“阻止系统默认（行为）”。 二、stopPropagation，stop是动词，意为“中止”；Pr...
js阻止冒泡和默认事件（默认行为）详解
10-21
主要为大家详细介绍了js阻止冒泡和默认事件，即默认行为,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js事件冒泡、事件捕获和阻止默认事件详解
01-19
谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。 1.事件冒泡 先来看一段代码： var $input = document.getElementsByTagName(input)[0]; var $...
JS传播事件、取消事件默认行为、阻止事件传播详解
10-19
JavaScript中的事件处理是Web开发中的核心概念，它涉及到事件的传播、取消默认行为以及阻止事件传播等关键点。本文将详细解析这些概念。 首先，**事件处理程序的返回值**在JavaScript中扮演着一个特殊的角色。当...
所用的 getPreventDefault() 已不赞成使用。请改用 defaultPrevented。
qq_27361945的博客
02-28 3803
运行jquery官网的event.preventDefault()例子（api.jquery.com/event.preventdefault/）时，出现警告提示：所用的 getPreventDefault() 已不赞成使用。请改用 defaultPrevented。&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;me...
DOM深入学习 --- 浏览器默认行为（三）
秋天，黄叶坠地，凉风有信。
03-10 1262
浏览器默认行为 许多事件会自动触发浏览器执行某些行为。 例如： 点击一个链接 —— 触发导航（navigation）到该 URL。 点击表单的提交按钮 —— 触发提交到服务器的行为。 在文本上按下鼠标按钮并移动 —— 选中文本。 如果我们使用 JavaScript 处理一个事件，那么我们通常不希望发生相应的浏览器行为。而是想要实现其他行为进行替代。 阻止浏览器行为 有两种方式来告诉浏览器我们不希望它执行默认行为： 主流的方式是使用 event 对象。有一个 event.preventDefault()
js事件分类（鼠标、键盘、文本、其它、特殊事件）、事件的3种绑定方式和对应解除方式、自定义事件、事件冒泡和捕获、事件属性（源事件、鼠标事件属性、按键事件属性）、事件方法。
AIWWY的博客
04-13 1552
目录 事件分类 鼠标事件 click mousedown mouseup mousemove contextmenu mouseover/mouseenter mouseout/mouseleave 键盘事件 keydown keypress keyup 文本事件 input change focus blur select reset submit 其它事件 scroll load unload error resize touchstart（移动端
[转]关于event的两个常被忽略的api：isDefaultPrevented()和preventDefault()
weixin_30617695的博客
11-12 244
今天在robert penner（as3 singal的作者）的一篇blog文中顺藤摸瓜到了darron schall的另外一篇blog文(Creating Default, Cancelable Event Handlers)，仔细看了一下，忽然有种相见恨晚的感觉。 确实是啊~rober penner的singal我不是第一天就知道了，之后再arpg的demo里面也有用过，只可惜今天才认...
Day10.事件下(学习日记10)
Night9u_的博客
02-21 158
进阶版
JS 取消冒泡和阻止默认事件
qq_45560350的博客
08-27 1193
事件对象 每个事件处理函数中，都可以有一个形参，系统会自动传递一个事件对象到函数中，这个对象的每个属性都代表事件被触发时的一些关键性数据 div.onclick = function(e){//形参e就是系统传递的事件对象 console.log(e); } 取消冒泡 1 .W3C标准 event.stopPropagation();但不支持IE9以下版本 document.onclick = function(){ console.log('aha'); } div.onclick = fun
【jQuery 事件】- isDefaultPrevented() 方法
u014369382的专栏
03-26 474
实例 防止链接打开 URL，并声明来自 isDefaultPrevented() 的结果： $("a").click(function(event){ event.preventDefault(); alert("Default prevented: " + event.isDefaultPrevented()); }); 下边是一段代码：preventDefault() 方法
了解 : prevent default
weixin_30296405的博客
10-19 144
基本了解是阻止事件之前设置好的事件触发，像是angular router ui里的 preventDefault是这样的。 在$stateChange的是后，可以调用preventDefault 来阻止，而这不是javascript自带功能，而是自己完成的。 preventDefault是一个沟通用的，被调用会通知内部，会roll back之前的设置。 javascript的preven...
jQuery Event.isDefaultPrevented() 函数详解
linybo的专栏
08-24 1580
isDefaultPrevented()函数用于判断是否已经调用过event.preventDefault()函数。 event.preventDefault()用于阻止了当前触发事件的默认行为。 该函数属于jQuery的Event对象。 语法 jQuery 1.3 新增该函数。 eventObject.isDefaultPrevented( ) 返回值 is
addEventListener(),封装取消冒泡的函数stopBubble(event)
weixin_44978975的博客
09-26 674
1冒泡事件是结构上的向外冒泡 捕获事件是结构上向里捕获 那么冒泡事件和捕获事件谁先执行啊 var wrapper =document.getElementsByClassName('wrapper')[0]; var content =document.getElementsByClassName('content')[0]; var box =document.getElementsByC...
js原生3种自定义事件方法（createEvent、init\initMouse\UIEvent和Event和CustomEvent）与触发自定义事件（dispatchEvent）
AIWWY的博客
10-27 5647
触发自定义事件 dom.dispatchEvent(eventObject) 触发指定dom节点上绑定的eventObject的type名相同的事件。 参数eventObject表示事件对象，是createEvent()、Event()、CustomEvent()方法返回的创建的Event对象。 创建自定义事件方法 方法一（已被W3C标准弃用，浏览还支持） 通过createEvent函数创建，再通过传入的参数对应的方法初始化。 dom.createEvent() 创建一个指定类型的事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值