Question

我正在处理投资组合项目，每个项目看起来像这样

<div class="item">
    <div class="item-title"></div>
    <div class="item-subtitle"></div>
    <div class="item-image"></div>
    <div class="item-site"></div>
</div>

上一个div隐藏，并且此代码显示项目

<a class="project" :href="`http://www.${item.site}`"  >

因此，如果我在项目站点div中放置“ mysite.com”这样的内容，并将鼠标悬停在项目输出上，则www.mysite.com，如果项目站点不为空，则可以。但是，如果该div为空，则输出为www。我不想要那有办法防止吗？如果item-site类为空，如何禁用单击，所以如果单击它，则什么也不会发生，但是如果不为空且具有链接，则单击该链接会在新窗口中打开。

Answer 1

您可以使用pointer-events: none CSS语句来禁用悬停并单击元素上的事件。

在您的情况下，可能看起来像这样：

HTML：

<div class="item">
    <div class="item-title"></div>
    <div class="item-subtitle"></div>
    <div class="item-image"></div>
    <div class="item-site not-clickable"></div>
</div>

CSS：

.not-clickable{
  pointer-events: none;
}

如果DOM元素（在这种情况下为<div class="item-site"></div>）为空，则添加类not-clickable。如果元素包含内容，则删除类not-clickable。

还请注意，默认情况下<div>标签不可点击。听起来您想让它们成为<a>标签的链接。我还认为没有<a>属性的href标记没有指针事件-因此一种替代方法是，当您希望元素可点击时提供href，并在需要时将其删除您希望该元素不可点击。

<div class="item">
    <div class="item-title"></div>
    <div class="item-subtitle"></div>
    <div class="item-image"></div>
    <a class="item-site">I should not be clickable</a>
    <a class="item-site" href="https://www.example.com" target="_blank">
      I should be clickable, and I will also open in a new tab
    </a>
</div>

这是一支可以进一步解释的笔：
https://codepen.io/mikeabeln_nwea/pen/yZQLaj?editors=1111

防止点击某些元素

1 个答案: