Menu
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 have setup a snippet here for better understanding.
.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);
}<a href="cmOpportunitySummary" class="white" style="text-decoration:none;pointer-events: none; cursor: default;;">
<div class="fc-card-header">
<div class="grid-row">
<div class="grid-cell text-left no-padding padding-right cell-auto-width">
<div class="svg-icon no-width no-padding white" data-role="ico_RoundStar"><svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path> <path d="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>
<div class="grid-cell no-padding flex flex-vcenter">
<p class="text-left white">Opportunities</p>
</div>
</div>
<div class="grid-row padding-top">
<div class="grid-cell no-padding padding-top padding-bottom text-left flex flex-vcenter">
<span class="heading white no-line-height">0</span>
</div>
</div>
</div>
</a>
392
Bookmark this question. Show activity on this post.
Pointer events are DOM events that are fired for a pointing device. They are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers). The pointer is a hardware-agnostic device that can target a specific set of screen coordinates.
Default Pointer Events on an element corresponds to the CSS pointer events property. It controls whether or not an element will "pass through" clicks to elements that are underneath it (that is, elements that have a smaller z-index).
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);
}<a href="cmOpportunitySummary" class="white">
<div class="fc-card-header">
<div class="grid-row">
<div class="grid-cell text-left no-padding padding-right cell-auto-width">
<div class="svg-icon no-width no-padding white" data-role="ico_RoundStar">
<svg viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="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>
<div class="grid-cell no-padding flex flex-vcenter">
<p class="text-left white">Opportunities</p>
</div>
</div>
<div class="grid-row padding-top">
<div class="grid-cell no-padding padding-top padding-bottom text-left flex flex-vcenter">
<span class="heading white no-line-height">0</span>
</div>
</div>
</div>
</a>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
