javascript - 渐变过滤器可防止在没有文本的 IE9 DIV 中单击事件

Question

我讨厌挖掘 IE9 问题，但令人惊讶的是我还没有看到这方面的帖子。

如果 div 设置了渐变 filter，则 click 事件不再适用于 div 的“空白”区域。如果 div 包含文本，click 事件将仅作用于文本。

有什么办法可以克服这个问题吗？

我已经编写了一个渐变生成器并希望它与 ie9 兼容。因此，解决方案需要特定于使用 filter，而不是用其他东西替换它。

当然，下面的示例片段需要在 IE9 仿真模式下运行才能看到问题。

var test1 = document.getElementById("test1");
test1.style.filter = "progid:DXImageTransform.Microsoft.gradient( startColorstr='#327796', endColorstr='#ffffff',GradientType=0)";
test1.addEventListener("click", function() {
  console.log("addEventListener clicked 1")
});

var test2 = document.getElementById("test2");
test2.style.filter = "progid:DXImageTransform.Microsoft.gradient( startColorstr='#327796', endColorstr='#ffffff',GradientType=0)";
test2.addEventListener("click", function() {
  console.log("addEventListener clicked 2")
});

var test3 = document.getElementById("test3");
test3.addEventListener("click", function() {
  console.log("addEventListener clicked 3")
});

.div {
  width: 70px;
  height: 70px;
  border: 1px solid black;
}

<div class="div" id="test1"></div>
<div class="div" id="test2">Some<br>Text</div>
<div class="div" id="test3"></div>

Answer 1

好的 - 最简单的解决方案似乎是插入一个高度和宽度等于 100% 的子 div。这会将事件毫不费力地传递给父 div。