代码之家 › 专栏 › 技术社区 › nmit026

IE 11 Bug-表单内标签内的图像-需要保留鼠标事件

internet-explorer css html jquery javascript

nmit026 · 技术社区 · 10 年前

请不要将此标记为重复!

我看过这些资源:

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。

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

这是一个完整的代码示例,包括CSS和Javascript,我正试图在IE中使用它们。在五星评级系统中,它可以让你点击星号而不是单选按钮。当你悬停在星星上时,星星就会亮起来。所以,如果你在恒星三上方悬停,它会点亮恒星一、二和三。一旦你点击一个星号,比如说星号三,星号一、二和三将保持亮起,悬停高亮功能将关闭。如果你点击星号二,星号二和二将亮起。这在除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();
        });
    });
}

2 回复 | 直到 9 年前

Stefan Vilbrandt 10 年前

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

nmit026 9 年前

<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或股票Android。使用 document.getElementById 线路运行良好。我不知道为什么会这样。