可点击标签在 IE 8 中不起作用答案

【问题标题】：Clickable label not working in IE 8可点击标签在 IE 8 中不起作用
【发布时间】：2016-08-05 22:09:22
【问题描述】：

我有以下列表项：

<li>
    <input value="someRadioButton" name="ctl00$mainContent$group" type="radio"
        id="ctl00_mainContent_somelRadioButton" onclick="showSomeInfo()" />
    <label for="ctl00_mainContent_someRadioButton">
        <img class="extraPadding-Right-10" src="https://xxy.com/some_mark_37x23.gif" />
    </label>
</li>

所以显示的是单选按钮和旁边的图像。当我在 FireFox、Chrome 和 Safari 中单击该图像时，会触发在收音机的 onclick 中指定的 showSomeInfo()。我不知道为什么我猜是因为它被包裹在一个标签中，并且该标签与那个单选按钮有关....

但无论如何，这不是我的问题。我喜欢当您单击图像时，会调用该 javascript 方法 showSomeInfo()。但问题是它适用于除 IE 8 之外的所有浏览器。如果我在 IE 8 中打开此页面，单击图像不会执行任何操作，我不知道为什么。我对此感到困惑。

【问题讨论】：

标签： javascript html

【解决方案1】：

我正在寻找这个问题的答案并为它写了一个快速的脏 jquery 处理程序：

$("label").click(function(){
    if ($(this).attr("for") != "")
        $("#" + $(this).attr("for")).click();
});

【讨论】：

应该使用focus 事件，而不是click。另外，我很确定 this.for 会起作用，所以你不必创建新的 jQuery 对象
Focus 事件触发的不够奇怪，所以我不得不使用 click。 this.for 不起作用，它是一个保留字：developer.mozilla.org/en-US/docs/JavaScript/Reference/…。你可以使用 this.getAttribute('for')
使用javascript：if(this.htmlFor)
小心：这可能会破坏 chrome 和 firefox 的功能
在 chrome 和 firefox 中，如果你有点击事件，它们会触发两次。

【解决方案2】：

有一种更简洁的方法来更改不涉及（丑陋的）CSS hack 或 Javascript 的标记；将<img> 标记更改为具有适当大小的背景图像的<span> 标记。例如：

<li>
  <input value="someRadioButton" name="ctl00$mainContent$group" type="radio"
         id="ctl00_mainContent_somelRadioButton" onclick="showSomeInfo()" />
  <label for="ctl00_mainContent_someRadioButton">
    <span class="extraPadding-Right-10" style="background-image: url(https://xxy.com/some_mark_37x23.gif); width: 100px; height: 100px; display: inline-block" />
  </label>
</li>

适当地替换图像的宽度和高度。

【讨论】：

【解决方案3】：

它在 Firefox 等中工作的原因是 <label> 当它有一个指向输入字段的“for”属性（通过“id”值）时应该做的事情。如果它在 IE 中不能以这种方式工作，那是因为微软要么以不同的方式解释了标准，要么只是未能正确实现它。（在我发现的 w3c 参考中，我没有看到任何明确的语言来规定除了标签的文本内容之外的任何内容是否应该获得焦点并转移它。）

【讨论】：

我也玩过它。无法让它与图像一起使用。文字没问题。
这不是一个建设性的答案，也没有为问题提供解决方案。
@Christopher 这是 2010 年 4 月的准确答案。Internet Explorer 在处理<label> 元素时以各种方式被破坏。现在是 2016 年，世界当然大不相同。另请注意，尽管您说答案没有提供问题的解决方案，但 OP 选择它作为回答问题。
@Christopher 好吧，我总是更喜欢实际的解决方案，有时正确的答案是“它不能完成”。就像如果有人问，“我怎样才能制造一个永动机？”，我不会说任何回答“不可能”的人都没有反应！
现实比这更复杂。我在 ASP.NET 程序中遇到了完全相同的问题。但是当我创建一个简单的 HTML 文件时，它工作正常。这有效： "" 好的，那是在 IE11 中，所以自从这个帖子以来，可能发生了一些变化最初发布。

【解决方案4】：

我还发现，如果您有 display:none 或 visibility:hidden 的隐藏输入并且依赖标签进行选择，则它在 ie8 中将不起作用。

我的解决方法是在包含元素上添加一个overflow:hidden，并将输入放置在该区域之外。

【讨论】：

这个小小的观察改变了我的早晨。感谢您的报告。
这应该是最好的答案！谢谢！

【解决方案5】：

我想对于这个问题我有更好的 hack 解决方案。我将首先解释原因。

使用 jquery 来点击标签有效，但在使用输入文件时无效，因为您将收到拒绝访问。

使用 css 并将图像显示为背景也不好，因为您需要具有精确尺寸的图像，当用户上传图像或您有很多不同的图像时，情况并非如此尺寸。

好的，现在我将解释黑客的想法：

你有一个标签，里面有一张图片，当你点击图片时，IE8 不会触发标签。但是如果你在标签中写入一些文本，当你点击文本时 IE8 会触发标签。

想法是在标签内放置一个跨度，标签的大小（宽度和高度）

好的，但是如果你没有在里面有文字，它就不起作用，但如果你改变背景颜色，它就会起作用。

所以你需要做的是：

使用 Label 的角色大小放置 Span
编写背景颜色并使其透明
使用相对位置定位 Span，以将 Span 正好放在标签上方。

这有点难，但我想它会涵盖更多的情况。标签触发输入类型文件的示例：

<label for="" id="lblInput" style="cursor: pointer; z-index:3;">
    <img src="../Imagens/SemPerfil.jpg" ID="imgFoto" Style="max-width: 280px; max-height: 180px;z-index:2;" />
    <span style="position:relative;
        top:-180px;display:block;height:180px;width:280px;
        z-index:1;background-color:Aqua;
        -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=1)';
        background: rgba(255, 255, 255, 0.0);" >
    </span>
</label>

我希望它能有效并拯救你，就像它拯救了我一样

【讨论】：

【解决方案6】：

你确定你不只是在看一个错字吗？检查“ctl00_mainContent_someRadioButton”与“ctl00_mainContent_somelRadioButton”

【讨论】：

【解决方案7】：

看起来 IE 不能正确处理带有 img 元素的标签。我能找到的处理这个问题的唯一合理方法是using HTML component behaviors、Javascript handlers 或CSS hacks。我还没有尝试过所有这些，所以我不能保证它们会起作用。

【讨论】：

【解决方案8】：

我尝试了此处发布的其他一些解决方案，并最终对其进行了修改，以解决您的问题。我的问题是类似的，虽然 HTML 看起来有点不同，标签标签包含图像和 INPUT 单选按钮。

我在下面包含的解决方案将确保任何onClick 处理程序在单选按钮本身上正确触发。它也只执行一次，而不是在单选按钮标签行为正常的浏览器中。

这是我在 Internet Explorer 11 中用来解决问题的 jQuery 代码：

$('LABEL > IMG').click(function () {
    var inputId = $(this).parents('LABEL:first').attr("for");
    if (inputId) $('#' + inputId).not(':checked').attr('checked', true).click();
});

上面的代码使用jQuery方法attr()来操作checked属性。如果您使用的是 jQuery 1.6 或更高版本，您应该修改它以使用 jQuery 方法 prop() 代替。

【讨论】：

【解决方案9】：

这对我来说适用于一组无线电输入，然后是包含图像的标签。基本上在所有浏览器中都使用它而不是使用 for 属性

      inputs.each(function() {

         $(this).click(function (e) {
             // do stuff ...
         });

        // adding click handler to label containing image 
        $(this).next().on('click', function(event) {
            // prevent 'for' attribute firing
            event.preventDefault();
            // check and trigger click on input
            $(this).prev().prop("checked", true).trigger('click');
        });
     });

【讨论】：