Javascript 防止单击某些元素

我正在处理公文包项目，每个项目都是这样的

<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}`"  >

所以，如果我把“mysite.com”放在item site div中，并将鼠标悬停在item output上，则是www.mysite.com，如果item site不是空的，这也没关系。但如果那个div是空的，那么输出就是www。我不想要它。有什么方法可以防止这种情况发生吗？

---

如何在item site类为空时禁用click，因此如果我单击它，则不会发生任何事情，但是如果它不是空的并且有链接，那么如果我单击它，则会在新窗口中打开该链接。

您可以使用

指针事件：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>

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

如果DOM元素（在本例中为

）为空，则添加类

不可单击

。如果元素包含内容，则删除类

不可单击

还请注意，

标签在默认情况下不可单击。听起来您希望这些链接是

这里有一支笔可以进一步解释：

---

https://codepen.io/mikeabeln_nwea/pen/yZQLaj?editors=1111If 你点击这些元素中的任何一个，“没有”就是已经发生的事情。大概您在某个地方有响应这些单击事件的代码。这就是你需要寻找的代码。

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