點擊鏈接中的複選框會導致鏈接被關閉 - 我該如何避免這種情況？

我有複選框insde鏈接。在Chrome瀏覽器以外的所有瀏覽器中，點擊複選框時，請按照鏈接（而不是僅勾選複選框）。點擊鏈接中的複選框會導致鏈接被關閉 - 我該如何避免這種情況？

如何避免此行爲？

演示（懸停在產品圖片，即可查看該複選框）：

http://livedemo07571.prestatrend.com/category.php?id_category=9

而這裏的問題代碼：

<a href="http://livedemo07571.prestatrend.com/product.php?id_product=25" class="product_img_link"> 
    <img src="http://livedemo07571.prestatrend.com/img/p/25-65-large.jpg" height="469" width="469" alt="Crew Neck Jumper" /> 

    <span class="new">New</span> 

    <div class="right_block large"> 
     <h3 class="large">Crew Neck Jumper</h3> 

     <span class="product_arrow"></span> 
     <p class="availability_container"><span class="availability">Available</span></p> 

     <span class="slash">&#47;</span> 
     <p class="price_container"><span class="price" style="display: inline;">$2,390.00</span></p> 

     <p class="compare large"><input type="checkbox" class="comparator" id="comparator_item_25" value="comparator_item_25" /> <label for="comparator_item_25">Select to compare</label></p> 
    </div> 
</a>

來源

2012-02-28 John Smith

是否有一個原因，爲什麼複選框必須在鏈接中？ – 2012-02-28 16:57:17

你好，這是這樣的設計理念，如果複選框不會在那裏就不好看。 – 2012-02-28 16:58:51

我可以問爲什麼你有這麼多的錨標籤？在錨標籤中有這麼多的標記通常是一個糟糕的主意。如果你需要它，由於在舊版瀏覽器中支持：懸停支持，我會建議使用JavaScript的功能，並將錨點更改爲div。然後，您可以在div上添加單擊事件，並在目標不是複選框時重定向。 – Zoidberg 2012-02-28 16:59:17

這不是有效的HTML（see report）。簡單地說，避免這種情況的方法是隻將文本或圖像包含在錨標記中，然後將複選框移到外面。您可以使用一些jQuery將一個點擊事件添加到可導航到下一頁的框中。

來源

2012-02-28 17:00:15 harriyott

它不會是有效的HTML5 - 事實證明，您不能在HTML5中的內部鏈接中使用''。（對，我想，正是我們在這裏看到的原因。） – 2012-02-28 17:03:52

如果你想換肯定不希望把它移動<a>之外，那麼你就必須有一個onclick="return false;"並添加與jQuery的偵聽器觸發它的點擊時。我不確定這是否適用於所有瀏覽器，並且您的最佳選擇是以標準友好的方式進行操作。

來源

2012-02-28 17:04:40

我認爲這是因爲你有Div（塊元素）在A（內聯元素）標籤內，並且默認情況下，當你點擊複選框時事件就會冒泡。

即使HTML 5已經爲A標記設置了例外，並且現在允許塊元素嵌套在該內聯元素中。爲了讓所有瀏覽器的工作都相同，你必須等待它們全部支持HTML 5功能

1）嘗試使用不同的文檔類型 2）在A之外構建div有鏈接不需要執行

來源

2012-02-28 17:12:24 elmuchacho

我只是預先在div外面加上覆選框，謝謝大家！ – 2012-02-28 17:15:41

點擊鏈接中的複選框會導致鏈接被關閉 - 我該如何避免這種情況？

回答

相關問題