IE 11错误-图像在标签内的形式-需要保存鼠标事件

IE 11 Bug - Image inside label inside form - Need to preserve mouse events

本文关键字：保存 鼠标 事件 错误 图像 IE 标签      更新时间：2023-09-26

请不要将此标记为重复!

我看了这些资源:

在IE11中不可点击的表单中输入的图像标签

IE 11错误-图像内部标签内部表单

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

，但我没有接近解决方案，所以我已经张贴了一个完整的代码示例。

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

我正在寻找一个解决方案，保留鼠标/指针事件，使下面的Javascript仍然工作。

这里是完整的代码示例，包括CSS和Javascript，我试图在IE中工作。它可以让你点击星星，而不是在五星评级系统中的单选按钮。当你在星星上方盘旋时，星星就会亮起来。如果你把鼠标悬停在星号3上，它会点亮星号1 2 3。一旦你点击一个星号，比如星号3，星号1、2和3会一直亮着，而悬停的高亮功能会关闭。如果你点击星星2，星星1和星星2就会亮起来。这在除IE以外的所有浏览器中都能很好地工作。在IE中，单选按钮不检查。

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

希望解决这个错误的互联网一劳永逸!

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();
        });
    });
}

您是否尝试为输入设置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("检查",真的)。

首先，为输入设置一个ID，并在标签上设置for属性。

<label class="starRadioButton" for="radioOne">
    <input type="radio" id="radioOne" name="Rating" value="4" />
    <img title="Very Good" alt="4" class="starFour" src="~/Content/star-grey.png" />
</label>
下面是解决这个问题的修改后的事件监听器: 
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();
        });
        //$("#radioOne").attr("checked", true);
        document.getElementById("radioOne").checked = true;
    });
}

请注意，我注释掉了使用jQuery的最后一行，并用原始Javascript代替了它。如果你使用的是被注释掉的jQuery行，那么评分将停留在你在IE和Edge中首先点击的星星上，而不是Opera、Chrome、Mozilla、Safari或stock Android。使用document.getElementById线工作良好。我不知道为什么会这样。

相关文章：