logo标签列表

可点击的标签在IE 8中无法工作

javascripthtml
26

我有如下列表项：

<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中，点击图片会触发radio标签中指定的showSomeInfo()方法。我不确定原因，可能是因为它被包含在label中，而该label与radio button相关联。

但这不是我的问题。我喜欢当单击该图片时调用javascript方法showSomeInfo()。但问题是，在IE 8中它不能正常工作。如果我在IE 8中打开此页，单击图片没有反应，我不知道为什么。我对此感到困惑。

9个回答
17

我正在寻找一个答案，并编写了一个快速而简单的 jQuery 处理程序：

$("label").click(function(){
    if ($(this).attr("for") != "")
        $("#" + $(this).attr("for")).click();
});
使用JavaScript：if(this.htmlFor) - A. Wolff
这对我没有用，因为我正在尝试触发一个输入文件而不是单选按钮，然后我遇到了访问被拒绝的问题。 - Daniel
2
请注意：这可能会破坏 Chrome 和 Firefox 的功能。 - Philipp Sander
2
在Chrome和Firefox中，如果有点击事件，它们会触发两次。 - Evan
这段代码片段对我没用，特别是在非IE浏览器中，标签点击会因单选按钮点击而触发循环。虽然稍微修改了这个解决方案，但似乎在所有浏览器中都可行。请参阅我的答案。 - Christopher
显示剩余2条评论
14

有一种稍微更清晰的方法可以改变标记，而不需要使用（丑陋的）CSS技巧或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>

适当更改您图片的宽度和高度。

7
在Firefox和其他浏览器中，它能够正常工作的原因是这是<label>标签的预期行为，当它有一个指向输入字段（通过"id"值）的"for"属性时。如果在IE中无法正常工作，则可能是因为Microsoft对标准进行了不同的解释或者没有正确地实现它。（我在找到的w3c参考文献中没有看到任何明确的语言规定除标签的文本内容外是否应该获得焦点并传输它。）
我也试着玩了一下，但是无法与图像一起使用。只能用于文本。 - Diodeus - James MacFarlane
这不是一个建设性的答案，也没有提供解决问题的方案。 - Christopher
@Christopher，这是2010年4月的一个准确答案。Internet Explorer在处理<label>元素时存在各种问题。现在已经是2016年了，当然世界变化很大。另外请注意，尽管您说这个答案没有提供解决问题的方法，但OP选择它作为回答问题的答案。 - Pointy
现实比这更加复杂。我在一个ASP.NET程序中遇到了完全相同的问题。但是当我创建一个简单的HTML文件时，它可以正常工作。这个可以工作："<input id="chk21" name="chk21" type="checkbox" class="customcheck2" onclick="alert('click');" /><label for="chk21"><img src="icon-dark-20-plus.png"/><img src="icon-dark-20-plusdown.png"/></label>" 好的，在IE11中可以工作，所以可能自从发布这个线程以来有些变化。 - Jay
@Jay 这是一个十年前的问题 :) - Pointy
显示剩余2条评论
7
我还发现，如果您有一个带有display:none或visibility:hidden的隐藏输入，并且依赖标签进行选择，则在ie8中将无法正常工作。
我的解决方法是在包含元素上使用overflow:hidden，并将输入位置放在此区域之外。
1
这个小观察刚刚让我的早晨变得更美好了。感谢您的报告。 - cage rattler
这应该是最好的答案！谢谢！ - FlyingHorse
3
我想我有一个更好的解决方案来解决这个问题。 首先，我会解释一下原因。
使用jquery点击标签可以起作用，但是当您使用输入文件时不行，因为您将收到访问被拒绝的错误。
使用css并将图像显示为背景也不好，因为您需要有一个与用户上传的图像或具有不同尺寸的许多图像完全相同大小的图像。
现在我将解释一下hack的想法：
您有一个带有图像的标签，当您单击该图像时，IE8不会激活该标签。但是，如果您在标签中写入一些文本，则单击文本时IE8会激活该标签。
这个想法是在标签内放置一个span，并使其大小（宽度和高度）与标签相同。
如果没有文本，那么它将不起作用，但是如果更改背景颜色，则会起作用。
所以你需要做的是：
1.放置一个与标签大小相同的Span 2.编写背景颜色并将其设置为透明 3.使用相对位置定位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>

我希望它能够运行并为您节省时间，就像它曾经为我所节省的一样。
1

您确定您不是在看错了吗？ 请检查 "ctl00_mainContent_someRadioButton" 和 "ctl00_mainContent_somelRadioButton" 的区别。

0

对于我来说，这个方法适用于一组包含图像标签的单选框输入。基本上在所有浏览器中使用它，而不是使用“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');
        });
     });
0

我尝试了这里发布的其他解决方案，并最终对它们进行了修改，以获得解决你问题的有效方法。虽然我的问题有些类似，但HTML代码看起来有些不同，LABEL标签包裹了图像和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()。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接