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>

回答

0

OK - 最简单的办法似乎是将带有高度和宽度等于100%的孩子股利。这无需大惊小怪地将事件传递给父div。