单击 label 标签中的图像不会在 Windows Phone 上触发

Question

我必须使用图像而不是文本作为单选元素的标签。它在除 Windows Phone 以外的所有设备上都能正常工作。简化代码可以在this example:

中找到

<form action="#" method="post">
    <label>
        <input type="radio" name="foo" value="0" />
        <img src="http://placehold.it/50x50"><br />
        text0
    </label>
</form>

输入字段在标签内或用for引用都没有区别。我也尝试使用 jQuery 和 trigger('input') 。但是除了单击元素本身或文本标签外，没有机会带 Windows Phone 来检查单选元素。我怎样才能将图像用作在 Windows Phone 上也适用的标签？

Answer 1

我添加了一个 "click"-位于标签内所有其他元素之上的元素（伪代码）：

<form action="#" method="post">
    <label style="position:relative;">
        <input type="radio" name="foo" value="0" />
        <img src="http://placehold.it/50x50"><br />
        text0
        <span style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;"></span>
    </label>
</form>

单击 label 标签中的图像不会在 Windows Phone 上触发

Click on image in label tag does not trigger on Windows Phone

html

windows-phone