阻止事件冒泡和事件默认

最新推荐文章于 2019-03-10 18:10:34 发布
最新推荐文章于 2019-03-10 18:10:34 发布
阅读量204 收藏
点赞数
分类专栏： javaScript 文章标签： 事件默认和事件冒泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37615202/article/details/79409502
版权 
<!DOCTYPE html>
<html>
 
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>效果测试</title>
<script language="javascript" type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
	$('div.c1').click(function(e){alert('单击了div1');});
	$('div.c2').click(function(e){alert('单击了div2');stopBubble(e);});
	$(document).click(function(e){alert('单击了document');});
	$('#txt1').val('123');
	$('#txt1').click(function(e){stopBubble(e);});
	$('#txt1').keypress(function(e){stopDefault(e);alert('你按下了键值'+e.keyCode); });
})
 
function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
    if ( e && e.stopPropagation ) {
        //因此它支持W3C的stopPropagation()方法 
        e.stopPropagation();      
    } else {
        //否则，我们需要使用IE的方式来取消事件冒泡 
        window.event.cancelBubble = true;  
    }
} 
//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) {
        e.preventDefault(); 
    } else {
        //IE中阻止函数器默认动作的方式 
        window.event.returnValue = false; 
    }
    return false; 
}
</script>
<style type="text/css">
body{
font-size:14px;
    }
}
</style>
</head>
 
<body>
 
<div class="c1">测试的文字,这里是样式C1,单击以冒泡的形式触发事件.</div><hr/>
 
<div class="c2">测试的文字,这里是样式C2,单击以捕获的形式触发事件.</div><hr/>
 
<div><input id="txt1" name="Text1" type="text" /></div><hr/>
 
</body>
</html>

Awen_liang1002
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Js阻止事件冒泡与阻止默认事件
weixin_44562686的博客
12-15 2232
1、event.stopPropagation()方法 event.stopPropagation()方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。 提示：请使用 event.isPropagationStopped()方法来检查指定的事件上是否调用了该方法。 2、event.preventDefault()方法 取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联
七、事件处理函数、冒泡捕获、阻止冒泡默认事件
布白的博客
02-14 542
七、事件处理函数、冒泡捕获、阻止冒泡默认事件 一、事件处理函数 事件是元素天生就具备的能力，比如可以被点击。 绑定事件——>绑定事件的处理函数。 事件 + 事件的反馈 == 前端交互，交互体验 1.1 如何绑定事件（绑定事件处理函数） 1.1.1 elem.onxxx = function(){} 句柄绑定形式 兼容性好； 一个元素同一种事件只能绑定一个事件处理函数，后写覆盖先写。 位置： js中，一个元素同一种事件只能绑定一个事件处理函数，后写覆盖先写。 内联事件监听器（行内事件监听器），每一
如何阻止事件冒泡和默认（行为）事件？
binlety
08-04 7616
1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素； 3.return false  ； 这个方...
阻止事件冒泡和默认行为
weixin_39150852的博客
12-19 299
如何阻止事件冒泡 window.event.cancelBubble=true;//IE特有，谷歌支持，火狐不支持 event.stopPropagation();//谷歌和火狐支持，阻止事件冒泡但不组织事件本身 兼容性代码： function stopBubble(e) { if ( e &amp;&amp; e.stopPropagation ) { e.stopPropag...
取消冒泡和阻止默认事件
Hhjian524的博客
10-29 1063
取消冒泡： W3C标准 event.stopPropagation();但不支持ie9以下版本 IE独有 event.cancelBubble = true; 封装阻止默认事件的函数 cancelHandler(event); function stopBubble(event){ if(event.stopPropagation){ event.stopPropagati...
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
10-26
1. **阻止默认事件**： 当一个元素发生特定事件时，浏览器通常会执行一些默认的行为。例如，`<a>`标签点击后会跳转到指定的URL，`<button>`、`<input type="submit">`等表单元素会提交表单。`event.preventDefault...
js阻止冒泡和默认事件（默认行为）详解
10-21
综上所述，JavaScript中的阻止冒泡和阻止默认行为是非常重要的技术点，它们在处理复杂的事件监听和避免不必要的事件触发时发挥着重要的作用。理解并掌握这些技术对于提升前端开发的交互体验与代码质量具有重要意义。
javascript阻止事件冒泡和浏览器的默认行为
10-20
对于页面中的`div.c1`，当它被单击时，会触发一个事件，但是不会阻止冒泡；而`div.c2`则不同，单击时会触发`stopBubble`函数，从而阻止事件继续向上冒泡。同样地，对于文本框`#txt1`，当它被点击或按键触发时，会...
清空form表单数据的两种方式
热门推荐
Awen_liang1002
06-16 2万+
方法1：遍历页面元素 /* 清空form表单内容  id：表单ID*/  function ClearForm(id) { var objId = document.getElementById(id); if (objId == undefined) { return; } for (var i = 0; i < objId.e
javaScript自定义事件CustomEvent详解（二）intEvent 和 intiCustomEvent 的区别，及新式写法和老式写法的区别
Awen_liang1002
08-21 5250
javaScript自定义事件CustomEvent详解（二）intEvent 和 intiCustomEvent 的区别，及新式写法和老式写法的区别
javaScript自定义事件CustomEvent详解（一）intEvent 和 intiCustomEvent 的区别，及新式写法和老式写法的区别
Awen_liang1002
08-21 3572
intEvent 和 intiCustomEvent 的区别，及新式写法和老式写法的区别
JS获取页面所有元素并统计每个标签的个数
Awen_liang1002
03-01 2659
var map = {}; //采用递归调用的方法，比较方便和简单。 function fds(node){ if(node.nodeType === 1){ var tagName = node.nodeName; map[tagName] = map[tagName]? map[tagName] + 1: 1; } var children = node.child...
ES5、ES6深拷贝、浅拷贝
Awen_liang1002
03-10 2037
看这个文章之前，看一下这个作者的文档，讲了一下堆和栈、基本数据和引用数据，比较基础的一些东西：https://www.cnblogs.com/echolun/p/7889848.html 如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。 浅拷贝：复制对象的时候，只对第一层键值...
Chrome调试js经常出现的问题集合
Awen_liang1002
11-29 626
1.Chrome调试js出现Uncaught SyntaxError: Unexpected identifier 类似于这种情况出现的问题可能有：  1.引用的字符串没有加引号；  2.前面或者后面的引号没有补全；  3.单双引号嵌入错误；  4.语法的末尾分号用了中文标点.'  "  ;  >  用了中文；；  5.js文的上一句末尾没有加标点或者标点错误或
移动端开发和pc端开发笔记摘录【分享】
Awen_liang1002
05-23 520
本文摘录自各位前端大神，本人只是学习笔记使用，谢谢各位大神的资料指导！ 先说布局方面： PC端咱们最常用的就是固定宽度980px（也有960，1000,1200），然后水平居中 ； width:980px;margin:0 auto; 但移动端就不能这么用了，因为很多网页都是可以横屏看，也可以竖屏看；很多屏幕的分辨率不一样； 所以只要牵涉到移动端，就要牵涉到响应式（也叫自适应）；
使用Fiddler调试手机请求调用webapp
Awen_liang1002
09-15 505
从事前端开发的同学一定对Fiddler不陌生，它是一个非常强大的http(s)协议分析工具，如果你不知道它是什么，可以自行google一下，本文不再作科普；前面文章已经讲了如何用Fiddle 代理本地的Js文件，也是fiddler一个非常强大的功能。 我们知道如何在电脑上调试页面请求，但在手机端你没有这么多强大好用的调试工具来调试你的webapp，如果你需要查看在手机上打开页面时，所产生的htt
网页天幕代码！从css、html到js的完美实现（自执行函数加原型的完美应用）！！
Awen_liang1002
07-05 438
天幕代码！完整干货！已封装好一切！
JavaScript高级程序设计总结五
Awen_liang1002
08-08 353
第十六章 HTML5编程 第20章，JSON JSON（JavaScript Object Notation，JavaScript对象表示法），是JavaScript的一个严格的子集。 JSON可表示一下三种类型值： 简单值：字符串，数值，布尔值，null，不支持js特殊值：undefined 对象：一组无序的键值对 数组：一组有序的值的列表 不支持变量，函数或对象实例 注：J...
制止默认事件和制止事件冒泡
最新发布
06-09
在Web开发中，有两种常见的事件处理方式：默认事件和事件冒泡。默认事件是指当用户触发某个事件（例如点击按钮）时，浏览器会自动执行一些默认的操作（例如提交表单或者跳转到另一个页面）。而事件冒泡是指当某个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值