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而不会有任何麻烦。

渐变过滤器可防止IE9 DIV中没有文本

1 个答案: