使用 CSS 使 span 不可点击答案

【问题标题】：Use CSS to make a span not clickable使用 CSS 使 span 不可点击
【发布时间】：2021-08-28 00:57:24
【问题描述】：

<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>

我对 CSS 很陌生，我有一个像上面这样的简单案例。我想让“标题”和“某些网址”可点击，但希望将描述设为不可点击。有没有办法通过在跨度上应用一些 CSS 来做到这一点，以便在该跨度内的任何内容都不可点击。我的限制是，我不想改变 div 的结构，而只是应用 css 我们可以在锚标签内创建一个跨度，而不是可点击的吗？

【问题讨论】：

HTML: 描述
CSS: .noclick{ display:none;} ;-)
@Shamik 您是否考虑将您的“已接受答案”勾选移动到使用“指针事件：无；”的第二个答案?
光标：默认；指针事件：无；这将帮助你
我认为你的设计从一开始就是错误的。您应该将要单击的两个项目作为锚点。你把应该简单的事情复杂化了。

标签： css

【解决方案1】：

实际上，您可以通过 CSS 实现这一点。有一个几乎不为人知的 CSS 规则，名为指针事件。 a 元素仍可点击，但您的描述范围不可点击。

a span.description {
    pointer-events: none;
}

还有其他值，例如：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

【讨论】：

这里引用compatibility（基本上没有IE或Opera）。
嗯，这很烦人，我希望编写一个 css 类 .disabled 来禁用输入元素，而 dom 不会拒绝显示它们的值（通常，如果输入，dom 会给出一个空字符串的值被禁用）。不幸的是，这很有帮助，如果元素有 tabindex，你仍然可以使用 tab :(
是的，显然这不是为表单元素制作的。您仍然可以使用 input:disabled 并可能隐藏表单项 idk。
在 z-index 相对定位的 span 元素的情况下保存了我的皮肤。完美。
我对这些回复感到困惑——这根本行不通。由于仍然是可点击的，并且它被包裹在周围，即使将 span 设置为 pointer-events:none，点击 span 仍然会触发链接。在最新的 Chrome 上测试。我错过了什么？

【解决方案2】：

不使用 CSS。不过，您可以通过取消对这些元素的默认事件处理来轻松地使用 JavaScript 来实现。在 jQuery 中：

$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });

【讨论】：

Huh.Why 每次有人问与 html、javascript 等相关的问题，即客户端......解决方案是 Jquery。问题没有用 javascript 和 Jquery 标记。我知道你不能只用 css 来做这个，但 Jquery 不是解决方案。
jQuery 在这里仅用作 /example/。也就是说，在大部分实际情况下，jQuery 是一个非常非常好的选择。这里的例子非常适合 jQuery。
这个解决方案可能很好，但是这样你可以防止点击标签内的所有跨度......并且需要为点击事件清除标题跨度！
@Zuul 正如@Jon Cram 所说，这是示例代码。他需要 class 描述 span 并专门针对它。
70kb 一次，如果您正确设置您的服务器，如果您使用 Google 的托管版本，则可能一次都不会。

【解决方案3】：

CSS 用于应用样式，即界面的视觉方面。

单击锚元素导致执行操作是界面的行为方面，而不是风格方面。

仅使用 CSS 无法实现您想要的。

JavaScript 用于将行为应用于界面。您可以使用 JavaScript 来修改链接的行为。

【讨论】：

这取决于一个观点。对我来说，定义按钮是启用还是禁用的属性应该是 CSS/HTML 工作的一部分（风格方面）。行为方面应仅用于声明属性是否存在（是否处于活动状态）。
能够应用规则 pointer-events:none; 非常有用当您希望元素及其所有内容不可点击时使用 CSS，尤其是在您不知道或无法控制元素内容（即广告单元）的情况下。这可以与 javascript 结合使用，例如，如果您正在更改视图状态并且想要使元素在一段时间内或在某些条件下不可点击。虽然表示层和业务逻辑层的分离可能不是完美的，但在现实生活中的应用程序中，它可能是最简单和最可维护的解决方案。

【解决方案4】：

针对 piemesons 对 jQuery 的咆哮，Vanilla JavaScript(TM) 解决方案（在 FF 和 IE 上测试）：

在你的标记被加载之后（就在 body 标记关闭之前）把它放在一个脚本标记中，你会得到与 jQuery 示例类似的效果。

a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
  a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}

这将禁用对 a 标签内的每个第二个 span 的点击。您还可以检查每个 span 的 innerHTML 中的“描述”，或者设置一个属性或类并进行检查。

【讨论】：

-1 用于基于脚本的解决方案。蜘蛛可以检测到 CSS 不可点击性，JS 则不然。（例如，蜘蛛会以这种方式跟随你禁止的链接。）
我认为没有必要 -1 这个：我承认你可以使用 CSS，当 CSS 不是一个选项时，这是作为 jQuery 或其他非 vanilla JS 方法的替代品。
对于 ES6 的一小部分，这使整个事情的可读性提高了 110%：（但当 pointer-events 存在时仍然非常糟糕！专业提示：做这样的事情是你需要重新-想想你的方法。）for ( let elem of document.getElementsByTagName('a') ) elem.addEventListener('click', e => { e.preventDefault(); });

【解决方案5】：

这是我最简单的方法。不拘泥于 CSS 或 javascript：

<html>
<head>
</head>
<body>
<div>
    <p>
       <a href="http://www.google.com">
          <span>title<br></span>
       </a>
          <span>description<br></span>
        <a href="http://www.google.com">
         <span>some url</span>
       </a> 
    </p>
</div>
</body>
</html>

你可以替换

标记任何你想要的东西。

【讨论】：

【解决方案6】：

是的，你可以.... 您可以在链接元素的顶部放置一些东西。

<!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>

魔法酱发生在 product-type-simple:before 类这里发生的情况是，对于每个具有 product-type-simple 类的元素，您创建 something 其宽度和高度等于 product-type-simple 的宽度和高度，然后增加它的 z- index 以确保它将自己放置在 product-type-simple 的内容之上。如果您想查看发生了什么，您可以切换背景颜色。

这里是代码示例 https://jsfiddle.net/92qky63j/

【讨论】：

【解决方案7】：

CSS 与视觉样式有关，与行为无关，所以答案是否定的。

但是，您可以使用 javascript 来修改行为或更改相关跨度的样式，使其没有尖手指、下划线等。这样设置样式仍可使其可点击。

更好的是，更改您的标记，使其反映您希望它执行的操作。

【讨论】：

琐碎的反驳：基于标签的界面（甚至下拉菜单）使用:hover、:focus 或:focus-within：CSS 中的用户管理状态以构建更复杂的行为.第二个反点：滚动行为由 CSS 明确控制，因为滚动是一种视觉行为。鉴于鼠标光标选择是一个 CSS 属性，选择是否响应点击是有意义的，它确实存在，参考：投票最多的答案：pointer-events: none;（遗憾的是，不是选择的答案）

【解决方案8】：

你不能使用 CSS，CSS 只会改变 span 的外观。但是，您可以在不更改 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>

然后您可以设置它的样式，使其看起来也无法点击：

<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>

【讨论】：

感谢您的反馈。悬停时，光标不会更改为默认值它保持为手形，知道如何解决这个问题吗？
借助 CSS，您可以使用 pointer-events: none;。请参阅 FRAGA 的以下答案。我在 Safari 上亲自测试过。
-1：将 JS 内联比将 CSS 内联更不是一个好主意。您应该从外部 JS 文件绑定事件并阻止默认操作。
-1：不正确：pointer-events: none; 完全按照要求进行
确实有可能。 pointer-events 也解决了我的问题