Ie 8及以下不触发单击具有显示的元素:无;有解决办法吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (150)

问题是InternetExplorer 8及以下版本。找到了一个体面的工作解决方案。

发行

InternetExplorer 8及以下版本没有触发click()由jQuery设置的事件(甚至可能是内联的,不确定)<input />元素,这些元素具有CSS属性,display设为none。它可以在InternetExplorer 9、Mozilla Firefox和GoogleChrome中工作。怪怪的。这就是代码的方式,以及InternetExplorer 8和更低版本有什么解决办法吗?

语境

input被点击是一种样式display: none;。而函数则在click的事件input。因为所有的东西都在里面label,则触发click事件的inputlabel点击。你可以把它当作一个漂亮的选择器,隐藏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"));
    });
});​

更新1:尝试给予for属性:

<label for="btn1">
    <input type="button" value="Button 1" id="btn1" />

更新2:试用CSSvisibility: hidden;:

ul li label input {visibility: hidden;}

更新3:试用CSSposition: absolute;:

ul li label {overflow: hidden;}
ul li label input {position: absolute; left: -99em;}

更新4:手动触发click()职能:

$(document).ready(function(){
    $("input").click(function(){
        console.log("Hey you! " + $(this).attr("value"));
    });
    $("label").click(function(){
        $(this).find("input").click();
    });
});

那么,IE 8打印后就会从堆栈中出来。LOG: Hey you! Button 31209时代!

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,我不得不用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盒子是藏起来的。这个补丁只适用于IE8!

必须使用IE8及以下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;
}
提问于
用户回答回答于

只需对可见项使用单击处理程序即可。<label>或者<li><input>对象是隐藏的,希望它在所有浏览器中都能工作,那么只需要在<label>或者<li>因为这是一个可见的对象,当<input>是隐藏的。

用户回答回答于

因为IE8支持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;
}

现在input盒子是藏起来的。这个补丁只适用于IE8!

尝试使用IE8黑客:

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

所属标签

可能回答问题的人

  • 学生

    3 粉丝476 提问8 回答
  • uncle_light

    5 粉丝518 提问6 回答
  • o o

    4 粉丝494 提问5 回答
  • 富有想象力的人

    3 粉丝0 提问5 回答

扫码关注云+社区

领取腾讯云代金券