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

Question

我讨厌清理IE9问题，但是令人惊讶的是，我还没有看到有关此问题的文章。

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

有什么办法可以解决这个问题吗？

我已经编写了一个梯度生成器，希望它与ie9兼容。 因此，解决方案需要特定于使用filter ，而不是用其他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，而不必大惊小怪。