Question

我在整个文档上有一个eventHandler，目标是具有特定id的元素。该目标元素是一个包含一些内容的div。 eventHandler会检查＆＃39;点击＆＃39; -action。但是，每当我单击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.toSring（）是div的id。 div包含：1个img元素，1个h1元素和2个sub-div，每个包含一个h3元素和一个ol。我想要id为index.toString（）的WHOLE div是可点击的。现在，只有边可点击。单击图像等不起作用。

编辑2： https://jsfiddle.net/1j3rrtqg/2/ 请注意，文本不是可点击的，而是div的边缘（div不被其他元素覆盖）。

普通JS请。没有jQuery。

Answer 1

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

稍微修改this answer我们可以使用以下函数执行此操作：

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 (hasId(e.target, 'target') || isDescendant('target', e.target))。

查看this updated JSFiddle

中的结果

Answer 2

我可能会在类＆＃34; overlay＆＃34;中添加一个div，给这个div一个z-index为100，宽度和高度为100％。如果在div #index中需要点击某个内容，则可以添加一个样式attr，它将生成z-index: 0或给它pointer-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";
)};

Answer 3

只有div的边缘可点击的原因是子元素不共享div的id（也不应该）。

正如@jasper建议的那样，您可以在现有div之上叠加div以捕获点击次数，但该解决方案可能会引入一系列新问题（例如，如果用户想要在该div中选择文本，或者需要在该div中填写输入，该怎么办？）

在这种情况下我会使用的解决方案是使用事件委派。

Updated fiddle或内联示例：

＆＃13;

(function () {
    "use strict";
    var target = document.getElementById('target'),
        sayHeyo = function (elem) {
            alert('heyo from ' + elem);
        };
    target.addEventListener('click', function (e) {
      console.log(e.target.tagName + ' was clicked');
      sayHeyo(e.target.tagName);
    }, false);
}());

＆＃13;

#target {
  border: 1px solid;
  background-color: red;
}

＆＃13;

<div id="outer">
  <div id="target">
  <h1>
  I'm a clickable H1 element! <span>I'm a clickable SPAN element inside the H1 element!</span>
  </h1>
  </div>
  <div id="not-target">
  <h1>
  I'm another H1, not inside #target and therefore not clickable. <span>This is a SPAN (also not inside #target and therefore not clickable either)!</span>
  </h1>
  </div>
</div>

＆＃13;

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

3 个答案: