0
我讨厌挖掘IE9问题,但令人惊讶的是,我还没有看到过这篇文章。渐变过滤器可以防止在没有文字的IE9 DIV中点击事件
如果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>