点击链接中的复选框会导致链接被关闭 - 我该如何避免这种情况？

问题描述：

我有复选框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 16:57:17

你好，这是这样的设计理念，如果复选框不会在那里就不好看。 – 2012-02-28 16:58:51

我可以问为什么你有这么多的锚标签？在锚标签中有这么多的标记通常是一个糟糕的主意。如果你需要它，由于在旧版浏览器中支持：悬停支持，我会建议使用JavaScript的功能，并将锚点更改为div。然后，您可以在div上添加单击事件，并在目标不是复选框时重定向。 – Zoidberg 2012-02-28 16:59:17

答

这不是有效的HTML（see report）。简单地说，避免这种情况的方法是只将文本或图像包含在锚标记中，然后将复选框移到外面。您可以使用一些jQuery将一个点击事件添加到可导航到下一页的框中。

它不会是有效的HTML5 - 事实证明，您不能在HTML5中的内部链接中使用''。（对，我想，正是我们在这里看到的原因。） – 2012-02-28 17:03:52

答

如果你想换肯定不希望把它移动<a>之外，那么你就必须有一个onclick="return false;"并添加与jQuery的侦听器触发它的点击时。我不确定这是否适用于所有浏览器，并且您的最佳选择是以标准友好的方式进行操作。

答

我认为这是因为你有Div（块元素）在A（内联元素）标签内，并且默认情况下，当你点击复选框时事件就会冒泡。

即使HTML 5已经为A标记设置了例外，并且现在允许块元素嵌套在该内联元素中。为了让所有浏览器的工作都相同，你必须等待它们全部支持HTML 5功能

1）尝试使用不同的文档类型 2）在A之外构建div有链接不需要执行

我只是预先在div外面加上复选框，谢谢大家！ – 2012-02-28 17:15:41

点击链接中的复选框会导致链接被关闭 - 我该如何避免这种情况？

相关推荐