使用CSS使跨度不可点击

Sha*_*mik 54 css

<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>
Run Code Online (Sandbox Code Playgroud)

我是CSS的新手,我有一个像上面这样的简单案例.我想使"标题"和"一些网址"可点击,但希望将描述视为不可点击.有没有办法通过在跨度上应用一些CSS来做到这一点,以便在该跨度内的任何内容,它是不可点击的.我的约束是,我不想改变div的结构,而只是应用css我们可以创建一个在锚标签内的span,而不是可点击的?

FRA*_*AGA 275

其实,你可以通过CSS实现这一目标.有一个几乎未知的css规则名为指针事件.在一个元素将仍然可以点击,但你的描述跨度不会.

a span.description {
    pointer-events: none;
}
Run Code Online (Sandbox Code Playgroud)

还有其他值,如:all,stroke,painted等.

参考:http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

更新:截至2016年,所有浏览器现在都接受它:http://caniuse.com/#search=pointer-events

  • 这里是对[兼容性](http://caniuse.com/#search=pointer-events)的引用(基本上没有IE或Opera). (3认同)
  • 这很漂亮!!谢谢! (2认同)

小智 -33

使用CSS你不能,CSS只会改变跨度的外观。但是,您可以通过向 span 添加 onclick 处理程序来在不更改 div 结构的情况下完成此操作:

<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>
Run Code Online (Sandbox Code Playgroud)

然后你可以设置它的样式,使其看起来也不可点击:

<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>
Run Code Online (Sandbox Code Playgroud)

  • 通过 CSS,您可以使用“pointer-events: none;”。请参阅下面 FRAGA 的回答。我亲自在 Safari 上测试过。 (34认同)
  • -1:不正确:`pointer-events: none;` 完全按照要求执行 (19认同)
  • 确实有可能。`pointer-events` 也解决了我的问题 (5认同)
  • -1:将 JS 内联放置比将 CSS 内联放置更不是一个好主意。您应该从外部 JS 文件绑定事件并阻止默认操作。 (3认同)