使用 css 禁用父链接(锚点)

我有一个锚点和一个带跨度的 H1。当我单击跨度时，我会显示警报，但链接也已打开，我不希望发生这种情况，我只想显示警报。有没有办法用CSS做到这一点(我不能不使用jQuery)？也许 z 索引？。这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="_blank">
<h1>Title <span>Some text</span></h1>
</a>
<script>
$("span").click(function() {
alert("The span was clicked");
});
</script>
</body>
</html>

这里是小提琴：https://jsfiddle.net/b820m6uj/

如果你不能使用jQuery，你可以使用vanilla javascript：

<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
h1 {
background-color: green;
}

span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="_blank">
<h1>Title <span>Some text</span></h1>
</a>
<script>
document.querySelectorAll('a').forEach(function (link) {
link.addEventListener('click', function (event) {
event.preventDefault();
alert("The span was clicked");
});
});
</script>
</body>
</html>

如果您已经在使用 jQuery，请更改span选择器以a传递event对象并在块中添加event.preventDefault()。请参阅演示 1。

这是一种使用 CSS 的方法，但您需要在 HTML 中更改 2 件事。

向您的<span>或<h1>投放id(例如<span id='tgt'>...')
接下来，将<a>nchortarget更改为<span>的id(例如<a href="whatever.com" target='tgt'>...')
最后但并非最不重要的一点是，将此规则集添加到您的 CSS 中：
```
#tgt:target {display:inline}
```

伪类是:target的，如上所述，当应用伪类时，它将在单击<a>nchor时启用分配给它的选择器上的任何规则集(当然，前面已经解释了所有准备工作)。我分配display:inline是因为span#tgt已经在inline使<a>nchor真正残疾，几乎完全没有价值但可点击。请参阅演示 2。顺便说一句，在演示 2 中使用 JavaScript 添加了第二个示例，它仍然可以正常工作。

演示 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
h1 {
background-color: green;
}

span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="_blank">
<h1>Title <span>Some text</span></h1>
</a>
<script>
$("a").click(function(event) {
event.preventDefault();
alert("The span was clicked");
});
</script>
</body>
</html>

演示 2

document.getElementById('tgt2').addEventListener('click', function(e) {
/* Once again this would be the best solution */
// e.preventDefault()
alert("Hey JavaScript/jQuery works still!")
}, false);

#tgt1:target {
display: inline
}
#tgt2:target {
display: inline
}

<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
background-color: green;
}

span {
font-size: 12px;
color: white;
margin-left: 15px;
}
</style>
</head>
<body>
<a href="https://stackoverflow.com/" target="tgt1">
<h1 id='tgt1'>Title <span>:target with CSS only</span></h1>
</a>
<hr/>
<a href="https://stackoverflow.com/" target="tgt2">
<h1 id='tgt2'>Title <span>:target with JS alert()</span></h1>
</a>
</body>
</html>

您可以将单击处理程序附加到a然后测试e.target并查看它是否是跨度，如果是，则显示警报并使用e.preventDefault()禁用链接。

$("a").on('click', function(e) {
	span = $(this).find('h1 span')[0];
	if (e.target == span) {
		e.preventDefault();
		alert("The span was clicked.");
	}
});

h1 {
background-color: green;
}
span {
font-size: 12px;
color: white;
margin-left: 15px;
position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://stackoverflow.com/">
<h1>Title <span>Some text</span></h1>
</a>

演示 1

演示 2

相关内容

最新更新

热门标签：