There are several options available to you, but not all are created equal.
It is recommended that you enclose your element within a div or span and set the cursor on the wrapper while setting the pointer-events on the content. This method allows you to enjoy all the benefits without the need for JavaScript.
Another option is to use the disabled attribute on a button, which will disable its functionality. You can then set the cursor on the disabled element.
Lastly, although not advisable, you can use JavaScript to return false. However, this method is not preferred because the click event is still triggered, giving the appearance that the button was clicked even though the link was not followed through.
.disabled-wrapper {
display: inline-block;
cursor: not-allowed;
}
.disabled-wrapper a,
.disabled-wrapper button {
pointer-events: none;
}
button[disabled] {
cursor: not-allowed;
}
a.disabled.js-test,
button.disabled.js-test {
cursor: not-allowed;
}
<div class="disabled-wrapper"><a class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button">Test wrapper</a></div>
<button class="btn btn-primary btn-lg disabled not-allowed" href="https://www.example.com" role="button" disabled>Test disabled attribute</button>
<a class="btn btn-primary btn-lg disabled not-allowed js-test" href="https://www.example.com" role="button" onclick="return false">Test JS</a>