IE 11 Bug - 圖像內部標籤內部形式 - 需要保留鼠標事件

請不要將其標記爲重複！IE 11 Bug - 圖像內部標籤內部形式 - 需要保留鼠標事件

我已經看了這些資源：

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

來源

2016-09-21 nmit026

而不是在'label'上監聽'img'監聽。如果這不是一個選項，你可以嘗試將'img's包裝在一個包裝中，並聽取包裝上的點擊。這樣的星級評級可以變得更簡單，沒有JS，使用CSS。我會建議查找一些例子，如果你可以改變這一點。 – Qtax

我還沒有嘗試過，因爲下面的解決方案工作，但我希望它可以幫助別人。我同意CSS，謝謝。 – nmit026

你嘗試到一個ID設置爲輸入和對屬性的標籤？

<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瀏覽器會比其他瀏覽器對標籤/輸入更嚴格一些。（例如）$（「＃rating4」）。attr（「checked」，true）。如果沒有幫助，嘗試設置一個Id到您的輸入並展開您的click事件監聽器。

來源

2016-09-21 07:19:06

好吧，另一種可能性是設置每個JavaScript的檢查狀態。將Id設置爲您的輸入並使用（例如）$（「＃rating4」），attr（「checked」，true）或document.getElementById（「rating4」）。checked = true來展開您的click事件偵聽器。或觸發點擊事件，ike $（「＃rating4」）。trigger（「click」）; –

在click事件監聽器中放置'$（「＃rating4」）。attr（「checked」，true）'就像一個魅力一樣。把它放在你的主要答案中，我會將其標記爲已接受。雖然不是這個錯誤的一般解決方案，但它適用於這種情況。我盲目尋找一個CSS解決方案，並忽略了這個明顯的問題。非常感謝！ – nmit026

很高興，我可以幫助:)雖然我犯了同樣的錯誤，忽略了一個純粹的CSS解決方案。我改變了我的主要答案。 –

首先，在輸入上設置一個ID並在標籤上設置for-attribute。

<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行工作正常。我不知道爲什麼會發生這種情況。

來源

2016-09-22 01:01:13 nmit026

IE 11 Bug - 圖像內部標籤內部形式 - 需要保留鼠標事件

回答

相關問題