渐变过滤器可防止 IE9 DIV 中没有文本的点击事件

Question

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

如果 div 设置了渐变 filter，则 click 事件不再适用于 div 的 "empty" 区域。如果 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% 的 child div。这会毫不费力地将事件传递到 parent div。

渐变过滤器可防止 IE9 DIV 中没有文本的点击事件

Gradient Filter prevents click event in an IE9 DIV where there is no text

javascript

css

internet-explorer

linear-gradients

internet-explorer-9