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

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

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

问题出在Internet Explorer 8及以下版本。找到一个体面的工作解决方案。

问题

对于CSS属性设置为的元素,Internet Explorer 8及以下版本不会触发triggeringclick()事件。它适用于Internet Explorer 9,Mozilla Firefox和Google Chrome。是否有Internet Explorer 8及以下版本的解决方法?

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:试过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;}

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

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

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及以下

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>上。

热门问答

两台腾讯云的服务器在同一个地区,内网网段也相同,都是172.17.0.X,为啥ping内网地址不通?

HappyLau谈云计算

腾讯云 · 云计算高级工程师 (已认证)

专注于公有云,私有云解决方案,在kubernetes,openstack,kvm,ceph,linux,shell有丰富的实战经验。
推荐已采纳

首先看下两台机器是否在同个vpc内,在同个vpc内默认网络可以互通,如果不在同个vpc内需要通过对等连接或者云联网打通,如果在同个vpc下无法互通,请检查下安全组和os的防火墙规则,放行icmp连接。

求问keil5项目无法下载到开发板该怎么解决?

Supowang

腾讯 · 高级工程师 (已认证)

腾讯物联网操作系统TencentOS tiny产品接口人---岁寒知松柏,做最好的自己!
推荐
请检查st-link的驱动和stlink硬件,如果不行,尝试换其他stlink下载器试试,谢谢! 如果还没有解决,请加TencentOS tiny官方QQ群提问,谢谢! qq.png ... 展开详请

腾讯服务器怎么回事?怎么突然就无法连接了?

HappyLau谈云计算

腾讯云 · 云计算高级工程师 (已认证)

专注于公有云,私有云解决方案,在kubernetes,openstack,kvm,ceph,linux,shell有丰富的实战经验。
推荐
无法登录的原因有很多,可以按照如下步骤检查: 1. 通过vnc登录,检查系统是否启动 2. 检查操作系统的防火墙iptables或windows防火墙 3. 检查安全组是否放行了登录端口和icmp 按照上述步骤排查,大部分问题都可以解决。... 展开详请

COS AndroidSDK类型说明哪里有?

rickenwang

腾讯 · 客户端开发工程师 (已认证)

推荐
GetServiceResult 这个类在 'com.tencent.qcloud:cosxml:5.4.29' 包中,简化版 'cosxml-lite:5.4.29' 没有包含GetServiceResult; 另外你说的 CosXmlService 、QCloudCreden...... 展开详请

GME Demo 用Unity 打包Internal 包 闪退?

腾讯音视频小蔡

深圳市腾讯科技 · 软件开发工程师 (已认证)

QQ:471381568
推荐

你好,发生此情况的原因大概率是没有打包GME v8a架构所导致。请检查一下打包出来的apk是否有Android v8a 的相关so文件。

只用云存储不用CDN加速,访问云存储上的内容使用的是云服务器上的流量么?这种访问收流量费么?

Lew

腾讯云对象存储 · 工程师 (已认证)

推荐

所属标签

扫码关注云+社区

领取腾讯云代金券