使用 CSS 使跨度不可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3144050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use CSS to make a span not clickable
提问by Shamik
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
I am pretty new to CSS, I have a simple case like the above. I would like to make the "title" and "some url" clickable but want to make description as non-clickable. Is there any way to do that by applying some CSS on the span so that whatever inside that span, it is not clickable. My constraint is that, I do not want to change the structure of the div, instead just applying css can we make a span which is inside an anchor tag, not clickable ?
我对 CSS 很陌生，我有一个像上面这样的简单案例。我想让“标题”和“一些网址”可点击，但想将描述设为不可点击。有没有办法通过在跨度上应用一些 CSS 来做到这一点，这样无论在跨度内，它都是不可点击的。我的限制是，我不想改变 div 的结构，而只是应用 css 我们可以制作一个位于锚标签内的跨度，而不是可点击的吗？
采纳答案by Elf King
Using CSS you cannot, CSS will only change the appearance of the span. However you can do it without changing the structure of the div by adding an onclick handler to the span:
使用 CSS 你不能，CSS 只会改变跨度的外观。但是，您可以在不更改 div 结构的情况下通过向 span 添加 onclick 处理程序来完成此操作：
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
You can then style it so that it looks un-clickable too:
然后，您可以对其进行样式设置，使其看起来也无法点击：
<html>
<head>
<style type='text/css'>
a span.unclickable { text-decoration: none; }
a span.unclickable:hover { cursor: default; }
</style>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span class='unclickable' onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
回答by FRAGA
Actually, you canachieve this via CSS. There's an almost unknown css rule named pointer-events. The aelement will still be clickable but your description span won't.
实际上，您可以通过 CSS 实现这一点。有一个几乎不为人知的 CSS 规则，名为指针事件。该a元素仍可点击，但您的描述范围不会。
a span.description {
pointer-events: none;
}
there are other values like: all, stroke, painted, etc.
还有其他值，例如：all、stroke、painted 等。
ref: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
参考：http: //robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
UPDATE: As of 2016, all browsers now accept it: http://caniuse.com/#search=pointer-events
更新：截至 2016 年，所有浏览器现在都接受它：http: //caniuse.com/#search=pointer-events
回答by ceejayoz
Not with CSS. You could do it with JavaScript easily, though, by canceling the default event handling for those elements. In jQuery:
不是用 CSS。不过，通过取消对这些元素的默认事件处理，您可以使用 JavaScript 轻松完成此操作。在 jQuery 中：
$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
回答by Jon Cram
CSS is used for applying stylingi.e. the visual aspects of an interface.
CSS 用于应用样式，即界面的视觉方面。
That clicking an anchor element causes an action to be performed is a behaviouralaspect of an interface, not a stylisticaspect.
单击锚元素导致执行操作是界面的行为方面，而不是风格方面。
You cannot achieve what you want using only CSS.
仅使用 CSS 无法实现您想要的效果。
JavaScript is used for applying behaviours to an interface. You can use JavaScript to modify the behaviour of a link.
JavaScript 用于将行为应用于界面。您可以使用 JavaScript 来修改链接的行为。
回答by NateDSaint
In response to piemesons rant against jQuery, a Vanilla JavaScript(TM) solution (tested on FF and IE):
为了回应对 jQuery 的诟病，一个 Vanilla JavaScript(TM) 解决方案（在 FF 和 IE 上测试）：
Put this in a script tag after your markup is loaded (right before the close of the body tag) and you'll get a similar effect to the jQuery example.
在加载标记后（就在 body 标记的关闭之前）将其放入脚本标记中，您将获得与 jQuery 示例类似的效果。
a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}
This will disable the click on every 2nd span inside of an a tag. You could also check the innerHTML of each span for "description", or set an attribute or class and check that.
这将禁用对 a 标签内每第二个跨度的点击。您还可以检查每个跨度的 innerHTML 以获取“描述”，或者设置一个属性或类并进行检查。
回答by kebyang
Yes you can.... you can place something on top of the link element.
是的，你可以......你可以在链接元素的顶部放置一些东西。
<!DOCTYPE html>
<html>
<head>
<title>Yes you CAN</title>
<style type="text/css">
ul{
width: 500px;
border: 5px solid black;
}
.product-type-simple {
position: relative;
height: 150px;
width: 150px;
}
.product-type-simple:before{
position: absolute;
height: 100% ;
width: 100% ;
content: '';
background: green;//for debugging purposes , remove this if you want to see whats behind
z-index: 999999999999;
}
</style>
</head>
<body>
<ul>
<li class='product-type-simple'>
<a href="/link1">
<img src="http://placehold.it/150x150">
</a>
</li>
<li class='product-type-simple'>
<a href="/link2">
<img src="http://placehold.it/150x150">
</a>
</li>
</ul>
</body>
</html>
the magic sauce happens at product-type-simple:beforeclass Whats happening here is that for each element that has class of product-type-simple you create somethingthat has the width and height equal to that of the product-type-simple , then you increase its z-index to make sure it will place it self on top of the content of product-type-simple. You can toggle the background color if you want to see whats going on.
魔术酱发生在产品类型-简单：前级请告诉我这里发生的是，对于具有一流的产品类型，简单的每个元素创建一些具有宽度和高度等于产品类型简单，然后你增加它的 z-index 以确保它将它自己放在 product-type-simple 的内容之上。如果你想看看发生了什么，你可以切换背景颜色。
here is an example of the code https://jsfiddle.net/92qky63j/
这是代码的示例 https://jsfiddle.net/92qky63j/
回答by FinnNk
CSS relates to visual styling and not behaviour, so the answer is no really.
CSS 与视觉样式有关而不是行为，所以答案是否定的。
You could however either use javascript to modify the behaviour or change the styling of the span in question so that it doesn't have the pointy finger, underline, etc. Styling it like that will still leave it clickable.
但是，您可以使用 javascript 来修改行为或更改相关跨度的样式，以便它没有尖尖的手指、下划线等。像这样设置样式仍将使其可点击。
Even better, change your markup so that it reflects what you want it to do.
更好的是，更改您的标记，使其反映您想要它做什么。
