Question

在我的网络应用程序中，我需要一个html链接列表，每个链接前面都有一个复选框。我需要创建列表，以便用户可以点击<li>上的任何位置而不是仅在文本上访问链接。但我需要从链接中排除复选框并单独选中/取消选中，以便单击复选框不会使链接点击。

enter image description here

出于我的目的，我创建了如下标记：

<a href='projecthome.php?pid=1'>
<li>
<input type='checkbox' name='chkproject' value='project'/>&nbsp;&nbsp;&nbsp;&nbsp;Example
</li>
</a>

这在Chrome中完美运行，我可以选中/取消选中该复选框，而不会触发链接点击。但是在Firefox中，当我点击复选框时，链接点击触发器，浏览器指向链接。我怎么能阻止这个？除了我的html标记之外还有其他任何替代方法可以防止这种情况吗？

谢谢。

Answer 1

li元素可能只是ul或ol元素的子元素，而不是a元素。

我实际上并不知道您要使用当前标记实现的目标，但我建议改为使用：

<a href='projecthome.php?pid=1'>...</a>
<label>
    <input type='checkbox' name='chkproject' value='project'/>
    Example
</label>

此外，您不应该使用 来分隔您的元素，您应该使用CSS：

label input[type="checkbox"] {
    margin-right: 10px;
}

Answer 2

我同意詹姆斯的意见，但未能通过使用该财产来实现：

pointer-events: none;

Answer 3

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testing</title>
</head>
<style>
li{width:100%; margin-bottom:5px;float:left;}
div{width:100%;}
li a{width:98%;padding:10px 0px 10px 30px; float:left; position:relative;}
</style>
<body>
<li>
<div style="background-color:#CCCCCC; float:left; position:relative;">
<a href="projecthome.php?pid=1" target="_blank">This is your link</a>
<input type='checkbox' name='chkproject' value='project' style="position:relative; clear:both;z-index:10; margin-left:10px; float:left; margin-top:-25px;"/>
</div>
</li>
<li>
<div style="background-color:#CCCCCC; float:left; position:relative;">
<a href="projecthome.php?pid=1" target="_blank">This is your link 2</a>
<input type='checkbox' name='chkproject' value='project' style="position:relative; clear:both;z-index:10; margin-left:10px; float:left; margin-top:-25px;"/>
</div>
</li>
<li>
<div style="background-color:#CCCCCC; float:left; position:relative;">
<a href="projecthome.php?pid=1" target="_blank">This is your link 3</a>
<input type='checkbox' name='chkproject' value='project' style="position:relative; clear:both;z-index:10; margin-left:10px; float:left; margin-top:-25px;"/>
</div>
</li>
<li>
<div style="background-color:#CCCCCC; float:left; position:relative;">
<a href="projecthome.php?pid=1" target="_blank">This is your link 4</a>
<input type='checkbox' name='chkproject' value='project' style="position:relative; clear:both;z-index:10; margin-left:10px; float:left; margin-top:-25px;"/>
</div>
</li>
</body>
</html>

从锚点HTML / CSS中排除复选框

3 个答案: