Pointer-events: None Is Not Working

I am creating a web application where I made a clickable card. I want to disable the click event on anchor tag for zero Opportunities. But pointer-events: none; is not working. I

Solution 1:

Use display:block; or display:inline-block; on a tag, it will work.

a {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  display: block;
  color: #fff;
}
.fc-card-header {
  background: #1976d2;
  padding: 24px;
  height: auto;
  border-radius: 3px;
  display: block;
}
.svg-icon svg {
  width: 24px;
  height: 24px;
  fill: rgba(0, 0, 0, 0.54);
}

<ahref="cmOpportunitySummary"class="white"><divclass="fc-card-header"><divclass="grid-row"><divclass="grid-cell text-left no-padding padding-right cell-auto-width"><divclass="svg-icon no-width no-padding white"data-role="ico_RoundStar"><svgviewBox="0 0 24 24"><pathd="M0 0h24v24H0z"fill="none"></path><pathd="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"></path></svg></div></div><divclass="grid-cell no-padding flex flex-vcenter"><pclass="text-left white">Opportunities</p></div></div><divclass="grid-row padding-top"><divclass="grid-cell no-padding padding-top padding-bottom text-left flex flex-vcenter"><spanclass="heading white no-line-height">0</span></div></div></div></a>

Solution 2:

I had button tag in my case. Adding display: inline-block helped in case of safari browser on MAC.

<buttonclassName={props.btnClass}style={{padding:props.btnPadding}}onClick={props.btnAction}
>
    {props.btnTitlle}
</button>

Below is the CSS:

button.disabledBtn {
    cursor: not-allowed;
    background: #7eb2ec;
    border: 2px solid #7eb2ec;
    margin-right: 22px;
    font-weight: initial;
    &:active {
      display: inline-block;
      pointer-events: none;
    }
  }