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

我有以下列表项：

<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（）。但问题是，它在除IE8之外的所有浏览器中都能工作。如果我在IE8中打开这个页面，点击图片什么都不做，我不知道为什么。我对此感到困惑。

它在Firefox等中的工作方式是因为当它有一个指向输入字段的“for”属性（通过“id”值）时，

应该这样做。如果它在IE中不起作用，那是因为微软要么以不同的方式解释了标准，要么就是没有正确地实现标准。（在我找到的w3c参考资料中，我没有看到任何明确的语言规定标签的文本内容以外的任何内容是否应该获得焦点并进行传输。）

看起来IE没有正确处理带有img元素的标签。我能找到的处理这个问题的唯一合理方法是要么，要么。我还没有尝试过所有这些，所以我不能保证它们都能工作。

我正在寻找答案，并为此编写了一个快速脏jquery处理程序：

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

---

有一种稍微干净的方法来更改标记，它不涉及（丑陋的）CSS黑客或Javascript；将

标记更改为具有适当大小背景图像的

标记。例如：

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

---

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

你确定你不是在看打字错误吗？

---

选中“ctl00\u mainContent\u someRadioButton”与“ctl00\u mainContent\u somelRadioButton”

我想我有一个更好的黑客解决方案来解决这个问题。 我将首先解释原因

使用jquery点击标签可以工作，但在使用输入文件时不行，因为您将收到拒绝访问的消息

使用css并将图像显示为背景也不太好，因为您需要具有精确大小的图像，而当用户上载图像或您有许多不同大小的图像时，情况并非如此

好的，现在我来解释一下黑客的想法：

如果标签中有图像，当您单击图像时，IE8不会触发标签。但是如果您在标签中写入一些文本，当您单击文本IE8时，将触发标签

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

好的，但是如果里面没有文本，它就不会工作，但是如果你改变背景颜色，它就会工作

因此，您需要做的是：

放置一个带有标签角色大小的范围

写一个背景色并使其透明

使用“相对位置”（relative Position）来定位跨距，以便将跨距精确放置在标签上

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

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

---

我希望它能起作用并像保存我一样保存你

我还发现，如果你有一个带有

display:none

或

visibility:hidden

的隐藏输入，并且依赖标签进行选择，那么它在ie8中将不起作用

---

我的解决方法是在包含元素上设置一个

溢出：隐藏
，并将输入放置在此区域之外。
我尝试了此处发布的一些其他解决方案，并最终对它们进行了修改，以获得解决问题的有效方法。我的问题与此类似，尽管HTML看起来有点不同，标签标签同时包装了图像和输入单选按钮

我在下面介绍的解决方案将确保任何
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（）
 对于我来说，这适用于一组无线电输入，然后是包含图像的标签。基本上在所有浏览器中都使用它，而不是使用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');
        });
     });

我玩了一会儿，但也玩了一会儿。无法使其与图像一起工作。文本没问题。这不是一个建设性的答案，也没有提供问题的解决方案。@Christopher这是2010年4月的一个准确答案。Internet Explorer在处理
元素时以各种方式被破坏。现在是2016年，世界当然大不相同了。还要注意的是，虽然你说答案没有提供问题的解决方案，但OP选择了它作为回答问题的答案。@Christopher好吧，我总是喜欢一个实际的解决方案，有时正确的答案是，“它不可能完成”。比如，如果有人问：“我怎样才能造一台永动机？”，我不会说回答“这不可能”的人是没有反应的！现实比这更复杂。我在ASP.NET程序中遇到了完全相同的问题。但是当我创建一个简单的HTML文件时，它工作得很好。这是有效的：“好的，这是在IE11中，因此可能自该线程最初发布以来发生了一些变化。应该使用
焦点
事件，而不是
单击
。另外，我非常确定
这个.for
会起作用，因此您不必创建新的jQuery对象，因为事件触发不够奇怪，所以我不得不使用click。T