IE 8及以下版本不触发点击有display：none的元素;任何解决方法？

Question

  

问题出在Internet Explorer 8及更低版本中。找到了一个像样的工作解决方案。

问题

Internet Explorer 8及更低版本未触发jQuery设置的click()事件（甚至可能是内联的，不确定）<input />元素，其中CSS属性display设置为none。它适用于Internet Explorer 9，Mozilla Firefox和Google Chrome。奇怪的。这是代码的方式，是否有适用于Internet Explorer 8及更低版本的解决方法？

上下文

要点击的input被赋予样式display: none;。该函数在click的{​​{1}}事件中给出。由于整个内容位于input内，因此当label点击时，它会触发click上的input事件。您可以将其视为某种漂亮的选择器，隐藏label。

默认情况下，input隐式将label事件转移到第一个click，这就是我想在此处使用它。我不希望用户在这里看到丑陋的input。预期的浏览器行为，但无法正常工作。

HTML

input

导致问题的确切CSS

<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>​

的JavaScript

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;}​

小提琴：http://jsfiddle.net/qSYuP/

---

更新＃1：尝试提供$(document).ready(function(){ $("input").click(function(){ alert("Hey you! " + $(this).attr("value")); }); });​ 属性：

for

仍然无效！

---

更新＃2：尝试了CSS <label for="btn1"> <input type="button" value="Button 1" id="btn1" /> ：

visibility: hidden;

打破布局。但是，仍然无效！

---

更新＃3：尝试了CSS ul li label input {visibility: hidden;} ：

position: absolute;

工作！我无法使用ul li label {overflow: hidden;} ul li label input {position: absolute; left: -99em;} ，严重抓住了！

---

更新＃4：手动触发overflow: hidden;功能：

click()

嗯，在打印$(document).ready(function(){ $("input").click(function(){ console.log("Hey you! " + $(this).attr("value")); }); $("label").click(function(){ $(this).find("input").click(); }); }); 1209 次后，IE 8会从堆栈中消失！

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 LOG: Hey you! Button 3 SCRIPT28: Out of stack space 的IE 8，我不得不将opacity与display: inline-block;一起使用。

opacity: 0;

现在隐藏了ul li label input { opacity: 0; width: 0px; height: 0px; display: inline-block; padding: 0; margin: 0; border: 0; } 的方框。此修复仅适用于IE 8！

必须使用 IE 8及以下Hack 修复：

input

小提琴：http://jsfiddle.net/VSQbD/

Answer 1

我认为这非常简单。您只需在可见项目上使用点击处理程序。如果您希望点击<label>或<li>以便隐藏<input>对象并希望它在所有浏览器中都有效，那么您只需要点击一下处理程序在<label>或<li>上，因为这是一个可见对象，会在隐藏<input>时收到点击。

Answer 2

有点糟糕的修复，但是做了诀窍！

由于这是因为支持opacity的IE 8，我不得不将display: inline-block;与opacity: 0;一起使用。

ul li label input {
    opacity: 0;
    width: 0px;
    height: 0px;
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 0;
}

现在隐藏了input的方框。此修复仅适用于IE 8！

尝试使用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;
}

Answer 3

你能不能将元素置于绝对位置，但是将它的左边属性设置为-99999px？

Answer 4

不同的浏览器以不同的方式解释display:none。 display:none实际上意味着元素应该消失，使得jquery很难在DOM中找到。

更好的方法是使用visibility:hidden，然后使用click方法

Answer 5

您的代码非常不正确..

{li> input在label内？
• 事件被假定为泡沫而不是向下
• 并且它如此简单..如果你想知道点击li的时间是附加一个处理程序而不是输入

在您更新的4中，您可以为“输入”点击执行event.stopPropagation，这将解决无限问题

Answer 6

从来没有受到过这样的打击，因为我做的事情略有不同 - 点击标签input.checked = !input.checked; return false;，然后进行＆＃34;更改＆＃34;输入事件（而不是点击事件）。