防止点击某些元素

Question

I'm working on portfolio items, where every item looks like this

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

Previous div is hidden and items are shown by this code

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

So, if I put like "mysite.com" in item-site div and hover over item output is www.mysite.com and that is ok if item-site is not empty. But if that div is empty output is www. and I dont want that.Is there a way to prevent that? How to dissable click if item-site class is empty, so if I click on it nothing happens, but if is not empty and has link then if I click it's opens that link in new window.

Answer 1

You can use the pointer-events: none CSS statement to disable the hover and click events on an element.

In your case, it might look something like this:

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

If the DOM element (in this case <div class="item-site"></div> ) is empty, then add the class not-clickable . If the element has content, then remove the class not-clickable .

Please also note that <div> tags are not clickable by default. It sounds like you want these to be links which are <a> tags. Also, an <a> tag without the href attribute has no pointer events - so an alternative would be to provide the href when you want the element to be clickable, and remove it when you want the element to not be clickable.

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

Here is a pen that might explain further:
https://codepen.io/mikeabeln_nwea/pen/yZQLaj?editors=1111