JavaScript 阻止默认时间和冒泡时间

最新推荐文章于 2021-11-22 00:08:07 发布
最新推荐文章于 2021-11-22 00:08:07 发布
阅读量93 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/facial/p/5479873.html
版权

<!DOCTYPE HTML>
<html>
<head>
<title>event cancel</title>
</head>

<body>

<a href="https://www.baidu.com/">baidu</a>


<div style="width: 400px; height: 300px; background: red;" id="d1">
<div style="width: 250px; height: 250px; background: yellow;" id="d2">
<button id="btn1">click me</button>
</div>
</div>

</body>
</html>

<script type="text/javascript" >


document.getElementsByTagName("a")[0].onclick = function(e){
cancelHandler(e); //取消a标签打开连接的事件， 然后执行click事件
alert("cancel the default event!");
}




function cancelHandler (event) {
　　var event = event || window.event; // for ie

　　//取消事件相关的默认行为
　　if(event.preventDefault) event.preventDefault(); //标准技术
　　if(event.returnValue) event.returnValue = false;

　　return false; //用于处理对象属性注册的处理程序。
}


//测试冒泡时间

document.getElementById("d1").onclick = function () {
　　alert("d1 clicked");
}

document.getElementById("d2").onclick = function () {
　　alert("d2 clicked");　　//点击d2会触发两次点击时间, 一次是d2自己的, 第二次是父亲d1的

}

document.getElementById("btn1").onclick = function (e) {
　　e.stopPropagation(); //阻止向上冒泡
　　alert("button clicked");
}



</script>

转载于:https://www.cnblogs.com/facial/p/5479873.html

weixin_30802171
关注
1.基础巩固--禁用默认事件
看开了
11-03 363
禁用默认事件的方法 1.event.preventDefault() 2.return false 区分 先从最常见的label开始, 1.label可以帮助我触发input类的元素的,常用来作为单选,多选的样式重做 2.label是个行内块 3.行内块具有块的性质,但是可以在同行排布 4.块的性质:     1.独占一行   &nbsp...
javascript阻止事件冒泡和浏览器的默认行为
11-26
JavaScript中的事件处理是Web开发中的重要组成部分，它允许我们对用户与页面的交互做出响应。在JavaScript中，事件...在编写交互式网页时，了解如何阻止事件冒泡和浏览器的默认行为对于创建定制的用户体验至关重要。
阻止默认时间
anhumi4350的博客
08-27 193
demo：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
js阻止时间冒泡
weixin_42488377的博客
11-14 253
阻止默认时间与阻止冒泡事件
weixin_44311876的博客
03-08 488
阻止默认事件 return false; 阻止默认事件，阻止事件冒泡 阻止事件捕获 el.returnValue=flase; //IE9以下兼容 el.preventDefault()IE兼容 直接阻止a标签 相当于直接返回false js 阻止冒泡事件 function stop(e){ e=e||window.event //兼容处理 if(e.stopPropagation){ ...
阻止默认事件
weixin_46140106的博客
05-20 207
<script> var ul = document.createElement('ul') document.oncontextmenu = function(e) { e = e || window.event ul.style.position = 'absolute' ul.style.left = e.clientX + 'px' ul.style.top = e.clientY + 'px' ul.innerHTML = '<
js阻止默认浏览器行为与冒泡行为的实现代码
10-22
在前端开发中，阻止默认浏览器行为和事件冒泡是常见的需求。所谓默认浏览器行为，指的是用户在浏览器中进行某些操作时，浏览器自身默认采取的响应。例如，点击一个链接时页面跳转，提交表单时页面刷新等。事件冒泡则...
JavaScript捕捉事件和阻止冒泡事件实例分析
10-18
如果需要同时阻止默认行为和冒泡，可以在事件处理函数中返回false，或者调用event.preventDefault()方法。 以上就是从给定文件内容中提取的关于JavaScript捕捉事件和阻止冒泡事件的知识点。通过这些知识点，读者...
浅谈javascript事件取消和阻止冒泡
10-24
总结来说，JavaScript的事件取消和阻止冒泡是控制页面交互行为的关键工具。通过使用`event.preventDefault()`、`event.stopPropagation()`以及IE特有的方法，我们可以精细地管理事件的行为，确保它们按照我们的预期...
阻止默认行为
RUYIBIG的博客
05-01 315
// 原生js document.getElementById('btn').addEventListener('click', function (event) {     event = event || window.event；     if (event.preventDefault){         // w3c方法 阻止默认行为         event.pre
纯html微信分享提示弹出层
11-10
纯html微信分享提示弹出层
jQuery 中的事件冒泡和阻止默认行为
aimartt的专栏
08-13 2万+
jQuery 中的事件冒泡和阻止默认行为 参考资料： 《锋利的jQuery》    作者：单东林 张晓菲 魏然    出版社: 人民邮电出版社 1、事件冒泡 <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
热门推荐
积少成多
11-11 10万+
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， 2.event.preventDefault()方法 这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父...
js中阻止默认事件
晴天有点孤单
08-17 6146
1>阻止冒泡事件var el = window.document.getElementById("a"); el.onclick = function (e) { //如果提供了事件对象，则这是一个非IE浏览器 if (e && e.stopPropagation) { //因此它支持W3C的stopPropagation()方法 e.stopProp
事件冒泡与默认行为
weixin_30644369的博客
02-01 317
在说事件冒泡之前，我们先说说事件对象（Event） Event 在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息） 所有浏览器都支持Event对象，但支持方式不同 IE中的事件对象：window.event 　　　　　/* 封装Event对象 ...
默认事件和阻止默认事件
TDXJY2260的博客
11-22 8661
默认事件 　　就是浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。比如在a标签href属性上的跳转，右键呼出的菜单等等。我们可以通过js取消或更改这些默认事件。 取消默认事件 　　默认事件都是定义在DOM元素相应的事件类型上的，我们只需要知道产生默认事件的是哪个元素，这个事件是什么类型的，就可以阻止或修改它。实现方式就是注册相应的事件处理函数，在其中通过如下API阻止默认事件的发生。 event.preventDefault() ： 阻止默认行为 （IE9以下的版本需要考虑到兼容性）e.
Js阻止事件冒泡与阻止默认事件
qsj0606的博客
04-23 2378
Js阻止事件冒泡与阻止默认事件 1、event.stopPropagation()方法 event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。 提示：请使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了该方法。 2、event.preventDefault()方法 取消事件的默认动作。该方法将通
JavaScript阻止浏览器默认行为与事件冒泡的详细实现及示例
在前端开发中，处理浏览器默认行为和事件冒泡是常见的需求，这有助于确保用户交互按照预期进行，特别是当涉及到表单提交、导航或特定元素的控制时。本文档提供了解决这些问题的JavaScript代码片段。 1. **阻止...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值