IE 8及更低版本不会触发点击有显示的元素:无；有解决方法吗？
此问题与Internet Explorer8及更低版本有关。找到了一个像样的工作解决方案。
问题
Internet Explorer8和更低版本不会触发由jQuery (或者甚至可能是内联的，不确定的)在<input />元素上设置的click()事件，这些元素具有CSS属性，display设置为none。它适用于Internet Explorer9、Mozilla Firefox和Google Chrome。真奇怪。代码就是这样的，有没有针对Internet Explorer8及更低版本的变通方法？
上下文
将为要单击的input指定一个样式display: none;。该函数在input的click事件中给出。由于所有内容都在label中，因此当单击input时，它会触发label上的click事件。您可以将其视为某种漂亮的选择器，隐藏input。
默认情况下，label隐式地将click事件传递给第一个input，这就是我在这里要用到的。我不想让用户在这里看到丑陋的input。预期的浏览器行为，但不起作用。
HTML
<ul>
<li>
<label>
<input type="button" value="Button 1" />
Hello! This is a list item #1.
</label>
</li>
<li>
<label>
<input type="button" value="Button 2" />
Hello! This is a list item #2.
</label>
</li>
<li>
<label>
<input type="button" value="Button 3" />
Hello! This is a list item #3.
</label>
</li>
</ul>导致问题的确切CSS
ul li,
ul li label {display: block; padding: 5px; cursor: pointer;}
ul li label input {display: none;}
ul li {border-bottom: 1px solid #ccc;}
ul li:hover {background-color: #eee;}JavaScript
$(document).ready(function(){
$("input").click(function(){
alert("Hey you! " + $(this).attr("value"));
});
});小提琴：http://jsfiddle.net/qSYuP/
更新#1:尝试提供for属性：
<label for="btn1">
<input type="button" value="Button 1" id="btn1" />还是不起作用！
更新#2:试用CSS visibility: hidden;
ul li label input {visibility: hidden;}打破布局。但是，还是不能工作！
更新#3:试用CSS position: absolute;
ul li label {overflow: hidden;}
ul li label input {position: absolute; left: -99em;}起作用了！我不在使用overflow: hidden;的位置，严重被抓到了！
更新#4:手动触发click()函数：
$(document).ready(function(){
$("input").click(function(){
console.log("Hey you! " + $(this).attr("value"));
});
$("label").click(function(){
$(this).find("input").click();
});
});好吧，IE8在打印的LOG: Hey you! Button 3 1209次后就出栈了！
LOG: Hey you! Button 3
LOG: Hey you! Button 3
LOG: Hey you! Button 3
LOG: Hey you! Button 3
LOG: Hey you! Button 3
SCRIPT28: Out of stack space 可以无限工作！应该是我的脚本的一个问题！
解决方案:有点糟糕的修复，但成功了！
因为IE8支持opacity，所以我不得不在opacity: 0;中使用display: inline-block;。
ul li label input {
opacity: 0;
width: 0px;
height: 0px;
display: inline-block;
padding: 0;
margin: 0;
border: 0;
}现在input的盒子被隐藏了，这个修复只适用于IE8！
必须使用IE 8及更低版本的Hack进行修复
ul li label input {
opacity: 0\9;
width: 0px\9;
height: 0px\9;
display: inline-block\9;
padding: 0\9;
margin: 0\9;
border: 0\9;
}https://stackoverflow.com/questions/13796729
复制相似问题