HTML文本框中ie 7和8沒有檢查圖像點擊

我似乎無法得到這個複選框在IE8中工作，我確實有JS與窗體工作，但我不相信它是JS導致問題。我沒有檢查過它是否可以在ie7中運行，但它在所有其他主流瀏覽器中都能正常工作。任何人都有一個想法，爲什麼它不工作？虐待提供代碼以及現場示例。HTML文本框中ie 7和8沒有檢查圖像點擊

直播： http://jsbin.com/uburan/3/edit

標記：

<script type="text/javascript"> 
function func() 
{ 
var img1= document.getElementById("img1"); 

if(document.getElementById('interest1').checked) 
{ 
    img1.src = "images/" + "internetbutton.gif"; 
    img1.name = "off"; 
} 
else 
{ 
    img1.src = "images/" + "internetbuttonchecked.gif"; 
    img1.name = "on"; 
} 
} 
</script> 



</head> 

<body> 
<form> 
<p align="center"> 
<input type="checkbox" name="interest1" id="interest1" value="x"> 
<input type="checkbox" name="interest2" id="interest2" value="x"> 
<input type="checkbox" name="interest3" id="interest3" value="x"></p> 
<p align="center"> 
<label for="interest1" id="label-interest1"><img src="images/img1.jpg" width="781" height="800" onclick="func()" id="img1" /></label> 
<label for="interest2" id="label-interest2"><img src="/images/img2.jpg" width="781" height="800" /></label> 
<label for="interest3" id="label-interest3"><img src="/images/img3.jpg" width="781" height="800" /></label></P><!-- code making checkbox be an image--> 
</form>

來源

2013-01-08 Nick

我相信這是因爲你有'img'嵌套在標籤內。在這種情況下，IE可能會忽略'for'屬性。 – Shmiddty

@Shmiddty你碰巧知道一種方法我可以解決這個問題嗎？ – Nick

好吧，在我看來，你太過複雜了。你試圖完成什麼？爲什麼你需要使用複選框？ – Shmiddty

我知道這個線程是一歲，但我發現這樣做的解決方案。

問題是label中的圖像捕獲您的點擊事件，並且它沒有傳遞給標籤。 label中的其他元素都將轉發該事件，但圖像不會，至少在IE中不會。

因此，唯一要做的就是使用pointer-events: none;來阻止圖片獲取點擊事件。

想象一下你的表單如（注：當輸入元的form標籤外使用不會發生此行爲）：

<form> 
    <input type="checkbox" name="interest1" id="interest1" value="1"> 
    <input type="checkbox" name="interest2" id="interest2" value="2"> 

    <label for="interest1" id="label-interest1"><img src="some/image1.jpg"/></label> 
    <label for="interest2" id="label-interest2"><img src="some/image2.jpg"/></label> 
</form>

你的CSS是：

label { 
    border:1px solid red; 
    display:inline-block; 
} 
label > img { 
    width: 100px; 
    height: 100px; 

    pointer-events: none; 
}

可以在這裏找到一個生動的例子： http://jsbin.com/OxOlETU/2/edit

感覺自由和t ry刪除行說pointer-events: none;爲測試目的。

編輯（2014年1月16日）：位測試之後，這似乎隻影響IE版本7，圖8和11 。在IE 9/10中，在label內嵌入圖像就像魅力一樣。

來源

2014-01-15 15:41:21

HTML文本框中ie 7和8沒有檢查圖像點擊

回答

相關問題