javascript - IE 11 错误 - 图像在标签内的表单内 - 需要保留鼠标事件

Question

请不要将此标记为重复!

我查看了这些资源:

Image label for input in a form not clickable in IE11

IE 11 Bug - Image inside label inside form

https://snook.ca/archives/javascript/using_images_as

但我离解决方案还很远，所以我发布了一个完整的代码示例。

表单内标签内的单选按钮和图像不会在 IE11 中 checkin 。

我正在寻找一种保留鼠标/指针事件的解决方案，以便下面的 Javascript 仍然有效。

这是完整的代码示例，包括我试图在 IE 中使用的 CSS 和 Javascript。它可以让您在五​​星级评级系统中单击星星而不是单选按钮。当您将鼠标悬停在星星上方时，星星会亮起。因此，如果您将鼠标悬停在三号星上，它会点亮一号、二号和三号星。一旦你点击一颗星，比如三颗星，一号、二号和三号星将保持亮起，悬停突出显示功能将关闭。如果您然后单击说星二，星一和二将点亮。这在除 IE 之外的所有浏览器中都能很好地工作。在 IE 中，单选按钮不选中。

我也知道 Javascript 是重复的和不优雅的，但它也相对容易理解(无论如何对我来说)。

希望一劳永逸地解决互联网的这个bug!

CSS

.starRadioButton > input { /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable (actually just hides it) */
  position: absolute; /* Remove input from document flow */
}

HTML

<form>

     <label class="starRadioButton">

          <input type="radio" name="Rating" value="1" />

          <img title="Poor" alt="1" class="starOne" src="~/Content/star-grey.png" />

     </label>


     <label class="starRadioButton">

          <input type="radio" name="Rating" value="2" />

          <img title="Fair" alt="2" class="starTwo" src="~/Content/star-grey.png" />

     </label>


     <label class="starRadioButton">

         <input type="radio" name="Rating" value="3" />

         <img title="Good" alt="3" class="starThree" src="~/Content/star-grey.png" />

     </label>


     <label class="starRadioButton">

         <input type="radio" name="Rating" value="4" />

         <img title="Very Good" alt="4" class="starFour" src="~/Content/star-grey.png" />

     </label>


     <label class="starRadioButton">

         <input type="radio" name="Rating" value="5" />

         <img title="Excellent" alt="5" class="starFive" src="~/Content/star-grey.png" />

     </label>                    

</form>

JavaScript

<script>


$(function ()
{
    $(".starOne").hover(function ()
    {
        $(".starOne").attr("src", "/Content/star-red.png");
    },
    function ()
    {
        $(".starOne").attr("src", "/Content/star-grey.png");
    }
    );
});

$(function ()
{
    $(".starTwo").hover(function ()
    {
        $(".starOne").attr("src", "/Content/star-red.png");
        $(".starTwo").attr("src", "/Content/star-red.png");
    },
    function ()
    {
        $(".starTwo").attr("src", "/Content/star-grey.png");
        $(".starOne").attr("src", "/Content/star-grey.png");            
    }
    );
});

$(function ()
{
    $(".starThree").hover(function ()
    {
        $(".starOne").attr("src", "/Content/star-red.png");
        $(".starTwo").attr("src", "/Content/star-red.png");
        $(".starThree").attr("src", "/Content/star-red.png");
    },
    function ()
    {
        $(".starThree").attr("src", "/Content/star-grey.png");
        $(".starTwo").attr("src", "/Content/star-grey.png");
        $(".starOne").attr("src", "/Content/star-grey.png");
    }
    );
});

$(function ()
{
    $(".starFour").hover(function ()
    {
        $(".starOne").attr("src", "/Content/star-red.png");
        $(".starTwo").attr("src", "/Content/star-red.png");
        $(".starThree").attr("src", "/Content/star-red.png");
        $(".starFour").attr("src", "/Content/star-red.png");
    },
    function ()
    {
        $(".starFour").attr("src", "/Content/star-grey.png");
        $(".starThree").attr("src", "/Content/star-grey.png");
        $(".starTwo").attr("src", "/Content/star-grey.png");
        $(".starOne").attr("src", "/Content/star-grey.png");
    }
    );
});

$(function ()
{
    $(".starFive").hover(function ()
    {
        $(".starOne").attr("src", "/Content/star-red.png");
        $(".starTwo").attr("src", "/Content/star-red.png");
        $(".starThree").attr("src", "/Content/star-red.png");
        $(".starFour").attr("src", "/Content/star-red.png");
        $(".starFive").attr("src", "/Content/star-red.png");
    },
    function ()
    {
        $(".starFive").attr("src", "/Content/star-grey.png");
        $(".starFour").attr("src", "/Content/star-grey.png");
        $(".starThree").attr("src", "/Content/star-grey.png");
        $(".starTwo").attr("src", "/Content/star-grey.png");
        $(".starOne").attr("src", "/Content/star-grey.png");
    }
    );
});

$(function ()
{
    StarOneHandler();
    StarTwoHandler();
    StarThreeHandler();
    StarFourHandler();
    StarFiveHandler();
})


function StarOneHandler()
{
    $(".starOne").on("click", function ()
    {
        $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />');
        $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-grey.png" />');
        $(".starThree").replaceWith('<img class="starThree" src="/Content/star-grey.png" />');
        $(".starFour").replaceWith('<img class="starFour" src="/Content/star-grey.png" />');
        $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />');
        $(function ()
        {
            StarOneHandler();
            StarTwoHandler();
            StarThreeHandler();
            StarFourHandler();
            StarFiveHandler();
        });
    });
}

function StarTwoHandler()
{
    $(".starTwo").on("click", function ()
    {
        $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />');
        $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-red.png" />');
        $(".starThree").replaceWith('<img class="starThree" src="/Content/star-grey.png" />');
        $(".starFour").replaceWith('<img class="starFour" src="/Content/star-grey.png" />');
        $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />');
        $(function ()
        {
            StarOneHandler();
            StarTwoHandler();
            StarThreeHandler();
            StarFourHandler();
            StarFiveHandler();
        });
    });
}

function StarThreeHandler()
{
    $(".starThree").on("click", function ()
    {
        $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />');
        $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-red.png" />');
        $(".starThree").replaceWith('<img class="starThree" src="/Content/star-red.png" />');
        $(".starFour").replaceWith('<img class="starFour" src="/Content/star-grey.png" />');
        $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />');
        $(function ()
        {
            StarOneHandler();
            StarTwoHandler();
            StarThreeHandler();
            StarFourHandler();
            StarFiveHandler();
        });
    });
}

function StarFourHandler()
{
    $(".starFour").on("click", function ()
    {
        $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />');
        $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-red.png" />');
        $(".starThree").replaceWith('<img class="starThree" src="/Content/star-red.png" />');
        $(".starFour").replaceWith('<img class="starFour" src="/Content/star-red.png" />');
        $(".starFive").replaceWith('<img class="starFive" src="/Content/star-grey.png" />');
        $(function ()
        {
            StarOneHandler();
            StarTwoHandler();
            StarThreeHandler();
            StarFourHandler();
            StarFiveHandler();
        });
    });
}

function StarFiveHandler()
{
    $(".starFive").on("click", function ()
    {
        $(".starOne").replaceWith('<img class="starOne" src="/Content/star-red.png" />');
        $(".starTwo").replaceWith('<img class="starTwo" src="/Content/star-red.png" />');
        $(".starThree").replaceWith('<img class="starThree" src="/Content/star-red.png" />');
        $(".starFour").replaceWith('<img class="starFour" src="/Content/star-red.png" />');
        $(".starFive").replaceWith('<img class="starFive" src="/Content/star-red.png" />');
        $(function ()
        {
            StarOneHandler();
            StarTwoHandler();
            StarThreeHandler();
            StarFourHandler();
            StarFiveHandler();
        });
    });
}

Answer 1

您是否尝试为输入设置 id 并为标签设置 for 属性？

<label class="starRadioButton" for="rating4"><input type="radio" id="rating4" name="Rating" value="4" />

     <img title="Very Good" alt="4" class="starFour" src="~/Content/star-grey.png" /></label>

我相信 IE 在标签/输入方面比其他浏览器更严格一些。

如果这没有帮助，请尝试为您的输入设置一个 Id 并使用(例如)$("#rating4").attr("checked", true) 扩展您的点击事件监听器。