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

Clickable label not working in IE 8

提问by PositiveGuy

I've got the following list item:

我有以下列表项：

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

So what shows up is a radio button and an image next to it. When I am in FireFox, Chrome, and Safari clicking on that image fires the showSomeInfo() that's specified in the radio's onclick. I'm not sure why I guess because it's wrapped in a label and that label is relating to that radio button....

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

But anyway that's not my problem. I like that when you click the image, that javascript method showSomeInfo() is called. But the problem is that it works in all browsers except IE 8. If I open this page in IE 8, clicking on the image does nothing and I'm not sure why. I'm baffled at this one.

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

采纳答案by Pointy

The reason it works the way it does in Firefox et al is that that's what <label>is supposed to do when it's got a "for" attribute that points to an input field (by "id" value). If it doesn't work that way in IE, it's because Microsoft either interpreted the standard differently or simply failed to implement it correctly. (I don't see any clear language in the w3c reference I found to stipulate whether anything but text content of a label should get focus and transfer it.)

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

回答by Rodrigo

I was looking for an answer to this and wrote a quick dirty jquery handler for it:

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

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

回答by Brad

There's a slightly cleaner approach to change the markup that doesn't involve (ugly) CSS hacks or Javascript; change the <img>tag to a <span>tag with a background-image of the appropriate size. For example:

有一种更简洁的方法来更改标记，它不涉及（丑陋的）CSS hacks 或 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>

Replacing the width and height of your image appropriately.

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

回答by Adam Hughes

I've also discovered that if you have a hidden input with display:noneor visibility:hiddenand are relying on the label for selection it will not work in ie8.

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

My workaround was to have an overflow:hiddenon the containing element and position the input outside of this area.

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

回答by Daniel

I Guess I have a better hack solution for this problem. I will explain why for first.

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

Using jquery to hit the label click works, but not when you are using an Input File, because you will receive access denied.

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

Using css and display the image as a background it′s not good too because you need to have an image with the exactly size, which is not the case when the user uploads the Image or you have a lot of images with different sizes.

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

Ok now I′ll explain the idea of the hack:

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

You have a Label with an image inside, when you click the image, IE8 doesn′t fire the Label. But if you write some text into the Label, when you click the text IE8 fire the label.

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

The Idea is to put a span inside the label, with the size of the label (width and height)

想法是在label里面放一个span，和label的大小（宽高）

Ok but if you don′t have text inside it won′t work, but if you change the background color it will work.

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

So what you need to do is:

所以你需要做的是：

1. Place a Span with the role size of the Label
2. Write a background color and make it transparent
3. Position the Span using relative position to put the Span exactly over the Label.

1. 使用标签的角色大小放置跨度
2. 写一个背景颜色并使其透明
3. 使用相对位置定位 Span，将 Span 正好放在 Label 上。

It′s a little hard to do it, but I guess it will cover many more situations. An example of a Label firing the Input type File:

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

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

I hope it works and save you Like it saved-me

我希望它有效并拯救你喜欢它拯救了我

回答by Wolfgang

Are you sure you aren't simply looking at a typo? Check "ctl00_mainContent_someRadioButton" vs. "ctl00_mainContent_somelRadioButton"

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

回答by Elias Zamaria

It looks like IE doesn't properly handle labels with img elements in them. The only reasonable ways I have been able to find for dealing with this problem are either using HTML component behaviors, Javascript handlers, or CSS hacks. I haven't tried all of these so I can't guarantee that they will work.

看起来 IE 无法正确处理其中包含 img 元素的标签。我已经能够找到处理这个问题的唯一合理的方法是使用 HTML 组件行为、Javascript 处理程序或CSS hacks。我还没有尝试所有这些，所以我不能保证它们会起作用。

回答by Christopher

I tried some of the other solutions posted here and eventually amended them to get a working fix to your problem. My problem was similar, though the HTML looked a little different, with the LABEL tag wrapping both the image and the INPUT radio button.

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

The solution I include below will ensure that any onClickhandlers fire correctly on the radio button itself. It also does this only once and not in browsers where the radio button label behaves normally.

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

This is the jQuery code I used to solve the problem in Internet Explorer 11:

这是我用来解决 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();
});

The code above uses the jQuery method attr()to manipulate the checkedproperty. If you're using jQuery 1.6 or higher you should modify this to use the jQuery method prop()instead.

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

回答by Alan King

This works for me with a group of radio inputs followed by labels containing an image. Basically used it instead of using for attribute in all browsers

这对我来说适用于一组无线电输入，然后是包含图像的标签。基本上使用它而不是在所有浏览器中使用 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');
        });
     });