javascript - 在 ONCLICK 事件上调用函数

标签 javascript html event-handling user-experience

我正在通过 div 容器的 ONCLICK 事件调用一个函数,但当我单击其内部元素时也会调用该函数,那么如何仅针对 div 容器而不是其内部元素调用该函数?

我在容器 div 上添加了 Onclick 事件并调用我的关闭函数

function closeMenu() {
    var target = document.getElementById("login-container");
    target.style.opacity = "0";
    target.style.zIndex = "-10";
}
var closeBtn = document.getElementById("close-overlay");
closeBtn.addEventListener("click", closeMenu);

如果我单击其内部 HTML 元素,我不想调用该函数,只是针对容器 div。

最佳答案

我希望这会有所帮助。

function closeMenu(e) {
 if (e.target.id === "close-overlay"){
    var target = document.getElementById("login-container");
    target.style.opacity = "0";
    target.style.zIndex = "-10";
  }
}
var closeBtn = document.getElementById("close-overlay");
closeBtn.addEventListener("click", closeMenu);

关于javascript - 在 ONCLICK 事件上调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58491169/

相关文章:

javascript - 水平居中图像大于屏幕并在浏览器调整大小时缩小图像

sharepoint - 以编程方式注册 Sharepoint 2007 事件处理程序

event-handling - Dart如何确定点击事件的来源

javascript - 将流与 baconjs 结合起来

javascript - 自定义星级评定 Angularjs

javascript - 像翻转一样水平旋转图像

php - 不能在同一个页面中编写 HTML 和 PHP 代码

javascript - 带缩略图的产品图片库

c# - 连接到单元测试中的事件

javascript - 热重载如何工作?