取消html中onclick的事件冒泡

最新推荐文章于 2023-04-06 17:49:45 发布
最新推荐文章于 2023-04-06 17:49:45 发布
阅读量3.2k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/licorice/p/10171713.html
版权

   阻止html中onclick事件冒泡，处理方法上多加事件一个参数，不需要传值。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
   
</head>
<body>
    <div style='background:red;width:200px;height:50px' onclick='a()'>
        <input type='button' value='ok' onclick='b()'></input>
    </div>
   <script type="text/javascript">
     function a(e){
        alert("this div")
     }
      function b(e){
        alert("this button")
        if(e&&e.stopPropagation){
            e.stopPropagation();
        }else{
        window.event.cancelBubble =true;
        }
     }
    </script>
</body>
</html>
View Code

结果：阻止，button按钮上的click事件冒泡，前端事件如下，或者如图阻止事件冒泡

 

 

转载于:https://www.cnblogs.com/licorice/p/10171713.html

weixin_30446613
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
阻止事件冒泡和围绕.on()方法 [.selector]事件委托中冒泡情况的探讨
Alcantara的博客
10-04 2670
2019-7-23更新： 1. document和body代理事件，在某些浏览器无效，目前发现在微信浏览器无效。 2. 前端使用模板引擎渲染的节点，可能滞后与事件的绑定，因此这种情况下最适合事件代理。 一、事件冒泡和阻止事件冒泡 事件冒泡是JavaScript的核心概念之一，它的原理很简单，但真正应用起来还是有不少的坑。 这里说一说关于阻止事件冒泡的本质。 我们都知道阻止事件冒泡...
HTML onclick 绑定事件阻止冒泡
weixin_45162984的博客
08-20 1423
HTML onclick 绑定事件阻止冒泡 <li class="add" onclick="click(this)"></li> function click(elem) { var even = window.event || arguments.callee.caller.arguments[0]; even.preventDefault(); even.stopPropagation(); } ...
js 事件冒泡是什么如何用jquery阻止事件冒泡
weixin_34318326的博客
12-03 206
  什么是事件起泡：一个事件不能凭空产生，这就是事件的发生等等，接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证，感兴趣的朋友可以参考下哈       （1）什么是事件起泡 首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。 当事件发生后，这个事件就要开始传播。为什么要...
阻止冒泡点击及在html中直接写function
weixin_38342534的博客
05-09 1160
       最近项目中需要写一个模拟点击事件，但是模拟点击的是该div下的某个子元素，因为有冒泡点击，于是乎就不停的循环，直到堆栈溢出。（新手水平，不喜勿喷）       为阻止冒泡点击事件，找了大量资料。因为我前端水平了了，他们写的又少了部分内容，所以搞了很长时间。下面我说下 如何 阻止冒泡点击例如：&lt;div onclick="$(this).find('.test').trigger(...
浅谈javascript事件取消和阻止冒泡
10-24
在处理事件时，有时我们需要阻止事件的默认行为或者避免事件的冒泡，这就是所谓的事件取消和阻止冒泡。 首先，让我们来理解什么是事件取消。事件取消的目标是防止浏览器执行与特定事件相关的默认行为。例如，当用户...
JS冒泡事件的快速解决方法
10-26
在早期的IE浏览器中，可以使用`event.cancelBubble = true`来取消事件冒泡。而在遵循W3C标准的浏览器（如Firefox、Chrome等）中，应当使用`event.stopPropagation()`方法来达到相同的效果。 下面是一个示例，展示了...
JS传播事件、取消事件默认行为、阻止事件传播详解
10-19
JavaScript中的事件处理是Web开发中的核心概念，它涉及到事件的传播、取消默认行为以及阻止事件传播等关键点。本文将详细解析这些概念。 首先，**事件处理程序的返回值**在JavaScript中扮演着一个特殊的角色。当...
阻止浏览器的默认事件和冒泡
07-03
1. **事件冒泡的概念**：事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）的过程。这个过程是递归的，并且会在每个阶段向上传播事件。 2. **...
实例解析jQuery中如何取消后续执行内容
10-21
在jQuery中，有时我们需要在处理某个事件时阻止其后续内容的执行，这通常是出于优化性能或控制事件流的需要。本文将通过实例解析如何在jQuery中实现这一功能。 首先，让我们看看一个基本的HTML和JavaScript示例，它...
解决点击事件冒泡
11-02
解决/阻止 div层内的div层点击事件冒泡触发的小方法 示例代码
html消除冒泡,取消冒泡.html
weixin_33750004的博客
06-03 334
Title*{margin: 0;padding: 0;}#but{position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);height: 100px;width: 100px;}html, body{width: 100%;height: 100%;}#munue{width: 100px;position: fix...
事件的捕获和冒泡
gong1422425666的博客
08-11 566
<!DOCTYPE html> <html> <head> <title>event</title> </head> <body> <div id="obj1"> obj1 <h5 id="obj2">obj2</h5> <h5 id="obj3">world</h5> </div>...
onclick重叠问题，click冒泡程序
snumous的博客
12-02 677
onclick重叠问题，click冒泡程序
html点击子元素事件而不触发父元素的点击事件—阻止冒泡
Demon's blog
07-30 5443
//1.利用stopPropagation方法 element.onclick=function (e) { todo something; e.stopPropagation();//阻止事件冒泡即可 } //不再派发事件。 //终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 //2.或者直接返回false： element.onclick=function (e) { .
如何在js中解决阻止事件冒泡问题？
Code_King006的博客
04-06 1684
内联onclick事件虽然没有显式的传入event对象，但是在click事件中还是可以使用event对象的，不过这里有个细节需要注意，那就是event总是保存着最后发生的那个事件对象的信息。事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne。会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度。运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层。---->然后再链接到百度.
HTML事件冒泡和JQuery阻止事件冒泡的方式
zxygww的专栏
08-06 6740
何为事件冒泡： HTML DOM模型是个树形结构，元素之间有相互嵌套的关系，比如Click Me 中div是父元素而a是子元素。如果父子元素都绑定了同一个事件比如onClick，当内层的子元素的事件被触发时，该事件会被传递到父元素中。 jQuery中如何阻止事件冒泡： 每个jQuery事件都有一个默认的参数对象，这就是event，通过执行该对象的event.stopPropagati
html 点击事件阻止冒泡,js阻止事件冒泡的两种方法
weixin_36264801的博客
06-07 4207
本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ，有需要的朋友可以参考一下一、冒泡事件简介当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。方法一：event.stopPropagation( );例如：段落文本内容html代码：// 为所有p元素绑定click事件$("p").click( function(event){alert("p-click"...
解决/阻止 div层内的div层点击事件冒泡触发的小方法
热门推荐
abb的码农部落格
10-25 1万+
两个层都绑定了点击事件，但是点击in层的时候，同时也会触发out层的点击事件。但是他并不希望触发out的点击事件，只希望触发in层的点击事件，问我怎么处理。 e.stopPropagation();//终止事件冒泡
a标签绑定一个onclick点击隐藏div再点击显示div 点击div以外的地方也隐藏并取消点击操作
最新发布
06-06
然后，我们给a标签绑定了一个onclick事件，在点击a标签时，通过判断div的display属性来实现隐藏或显示div。接着，我们给整个文档绑定了一个onclick事件，在点击div以外的地方时，隐藏div并取消点击操作。要注意的是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值