仅在内部元素(Javascript)上调用事件侦听器

格雷戈里·蒂皮特

我有一个div里面另一个div两者都附加了事件侦听器以在 mousedown 上运行函数 - 调用它们outerDivFunctioninnerDivFunction. 当我点击 inner 时div,两个函数都会被调用;我希望它只调用innerDivFunction.

这该怎么做?(原版解决方案比 jQuery 更受欢迎。)

马蒙

使用事件的stopPropagation()in innerDivFunction这防止了当前事件在捕获和冒泡阶段的进一步传播。

有关更多详细信息:事件传播

function outerDivFunction(){
  alert('Outer Div');
}

function innerDivFunction(e){
  e.stopPropagation();
  alert('Inner Div');
}
.outer{
  border: 1px solid blue;
}
.inner{
  border: 1px solid red;
  margin: 10px;
}
<div class="outer" onclick="outerDivFunction()">Outer Div
  <div class="inner" onclick="innerDivFunction(event)">Inner Div</div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在内部从事件侦听器调用类函数?

未调用事件侦听器

调用事件后等待事件侦听器完成

jQuery动态调用事件侦听器

使用事件侦听器克隆引导程序元素

如何在不使用事件侦听器的情况下检查单击的元素?

使用事件侦听器检测按钮的单击,然后增加html元素的计数

Javascript - 将事件侦听器添加到活动 <a> 标签,但从事件侦听器中排除内部元素

从javascript事件侦听器内部反应访问道具

删除在函数内部创建的事件侦听器?(JavaScript)

如何在内部类上调用函数

Javascript事件侦听器

调用侦听器事件时,Javascript数据不持久

用类方法调用的Javascript事件侦听器

事件侦听器多次调用Javascript函数

访问事件侦听器的 javaScript 中的数组元素

JavaScript事件侦听器与隐藏的DOM元素进行交互

在 Angular 中使用事件侦听器操作类

如何在 ReactJS 中使用事件侦听器?

ng-repeat仅在内部元素上

OnChild事件侦听器被多次调用

新元素的事件侦听器(单击)。

仅在数据更新 android 时调用的 Firebase 事件侦听器

为什么DOM元素仅在事件侦听器完成后才更新?(纯js)

在内部调用函数

如何使用事件侦听器单击功能使用 javascript 显示和隐藏数组中的图像

为什么在注册事件侦听器并触发事件侦听器之前调用滚动事件?

Angular-在事件侦听器函数内部调用服务函数返回未定义的错误

Shadow DOM外部的事件侦听器将不会绑定到Shadow DOM内部的元素