Javascript 使整个div可单击（调用函数）

我在整个文档上都有一个eventHandler，它以具有特定id的元素为目标。该目标元素是一个包含某些内容的div。eventHandler检查“单击”操作。 但是，每当我单击div中的一个元素时，它都不会激活。因此，我必须单击div的边缘才能激活eventHandler

有办法解决这个问题吗？我很想添加一个高度/宽度=100%的a元素，但找不到一个好方法让它执行JS函数，而不仅仅是重定向到链接

编辑1： 下面是发生的事情：

var inner = createDiv(['page-content', 'small-page-content', 'hover']);

document.addEventListener('click', function (e) {
  if (hasId(e.target, index.toString())) {
    makeLarge(index);
  }
}, false);

function hasId(elem, id) {
    return elem.id == id;
}

function createDiv(classes=[]) {
  var div = document.createElement('div');
  for (var i = 0; i<classes.length; i++) {
    div.classList.add(classes[i]);
  }
  return div;
}

index.toString是div的id。div包含：1个img元素、1个h1元素和2个子div，每个子div包含一个h3元素和一个ol。 我希望id为index.toString的整个div都可以单击。现在，只有边是可单击的。单击图像等不起作用

编辑2： 请注意，文本是不可单击的，但div的边缘将显示在div未被其他元素覆盖的位置

---

请给我简单的JS。没有jQuery

我可能会添加一个带有类覆盖的div，给这个div一个100%的z指数和100%的宽度和高度。如果在divindex中需要单击某些内容，您可以添加一个样式属性，使z索引为0或为其指定一个指针events:none

这看起来像这样：

var indexOverlay = document.querySelector('.overlay');

indexOverlay.addEventListener('click', function(e){
   //Do what you want to do
   e.target.style.zIndex = "-1";
   e.target.style.pointerEvents = "none";
)};

---

之所以只有div的边是可单击的，是因为子元素不共享div的id，也不应该共享

正如建议的那样，您可以在现有div上覆盖一个div以捕获点击，但该解决方案可能会引入一组新的问题，即，如果用户想要在该div中选择文本，或者需要在该div中填写输入，该怎么办

在这种情况下，我的解决方案是使用事件委托

或内联示例：

作用{ 严格使用； var target=document.getElementById'target'， sayHeyo=函数元素{ 从+elem向“heyo”发出警报； }; target.addEventListener'click'，函数e{ console.loge.target.tagName+“已单击”； sayHeyoe.target.tagName； }，假； }; 目标{ 边框：1px实心； 背景色：红色； } 我是一个可点击的H1元素！我是H1元素中的一个可点击的跨度元素！ 我是另一个H1，不在目标内，因此不可点击。这是一个跨度，也不在目标内，因此也不可点击！

---

此解决方案不会使div本身可单击。把这当作一种不同的方法，通过稍微改变你的逻辑来实现你所追求的目标。当您检查e.target是否等于target时，您还可以检查e.target是否是target的后代

稍微修改一下，我们可以使用以下功能完成此操作：

function isDescendant(parentId, child) {
     var node = child.parentNode;
     var parent = document.getElementById(parentId);
     while (node != null) {
         if (node == parent) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}

然后，您可以将条件更改为if hasIde.target，'target'| | isDescendant'target'，e.target

---

查看

中的结果不要对自己这么粗暴。无论如何-一些代码示例会很有帮助。@Kinduser现在添加了一些代码。默认情况下，在div中的任何单击都会弹出气泡并击中您的侦听器。您是否检查过任何内部元素是否有故意阻止事件传播的侦听器？@Max它们没有任何侦听器。makeLarge函数是什么？你能在你的答案中贴一个可运行的代码片段来说明你的问题吗？你的第一句话的开头对我来说毫无意义，我可能会在类“overlay”中添加一个。加上什么？对不起，我用了div.=真棒这个词。这很有效。