禁用 href 标签

正确使用按钮和链接。

• 按钮在网页上激活脚本功能（对话框，展开/折叠区域）。

• 链接将您带到另一个位置，可以是不同的页面或同一页面上的不同位置。

如果您遵循这些规则，则不会出现需要禁用链接的情况。即使您使链接看起来在视觉上被禁用并且在onclick事件中为空。

<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"

您不会考虑辅助功能和屏幕阅读器将其读作链接，视力障碍者将继续想知道为什么链接无法工作。

以下是禁用a标签的几种方法：

<a >Link Text</a> remove the href from your anchor tag
<a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href
<a href="/" onclick="return false;">Link text</a> using return false

As there is no disabled attributes for anchor tag. If you want to stop anchor tag behavior inside a jQuery function than you can use the the below line in the start of the function :

$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});

event.preventDefault()

<a href='/link/to/path' class='btn btn-primary mt-3' onclick='disableLink(this)'>Confirmar</a>

CSS文件

.isDisabled {
    cursor: not-allowed;
    opacity: 0.5;
}

a[aria-disabled="true"] {
    color: currentColor;
    display: inline-block; /* For IE11/ MS Edge bug */
    pointer-events: none;
    text-decoration: none;
}

.js文件

function disableLink(link) {
    // 1. Add isDisabled class to parent element
    link.parentElement.classList.add('isDisabled');
    // 2. Store href so we can add it later
    link.setAttribute('data-href', link.href);
    // 3. Set aria-disabled to 'true'
    link.setAttribute('aria-disabled', 'true');
}

function enableLink(link) {
    // 1. Remove 'isDisabled' class from parent span
    link.parentElement.classList.remove('isDisabled');
    // 2. Set href
    link.href = link.getAttribute('data-href');
    // 3. Remove 'aria-disabled', better than setting to false
    link.removeAttribute('aria-disabled');
}

参考资料：https://css-tricks.com/how-to-disable-links/

在href标签中的任何内容都会在鼠标悬停时显示在浏览器窗口的左下角。

我个人认为向用户显示javascript:void(0)之类的东西是丑陋的。

相反，不要使用href，用jQuery/其他工具进行操作，并添加样式规则（如果您仍然需要它看起来像链接）：

a {
    cursor:pointer;
}

<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>

你可以通过返回false来禁用锚标签。在我的情况下，我正在使用Angular和ng-disabled为Jquery手风琴进行操作，我需要禁用某些部分。

因此，我创建了一个小的JavaScript代码片段来解决此问题。

       <a class="opener" data-toggle="collapse"
                   data-parent="#shipping-detail"
                   id="shipping-detail-section"
                   href="#shipping-address"
                   aria-expanded="true"
                   ng-disabled="checkoutState.addressSec">
                   Shipping Address</a>
     <script>
          $("a.opener").on("click", function () {
           var disabled = $(this).attr("disabled");
           if (disabled === 'disabled') {
            return false;
           }
           });
     </script>

适合我的变量：

<script>
  function locker(){
    if ($("a").hasClass("locked")) {
         $("a").removeClass('locked').addClass('unlocked');
         $("a").attr("onClick","return false");
    } else {
         $("a").css("onclick","true");
         $("a").removeClass('unlocked').addClass('locked');
         $("a").attr("onClick","");
    }
  }
</script>

<button onclick="locker()">unlock</button>

<a href="http://some.site.com" class="locked">
  <div> 
      .... 
  <div>
</a>

<a href="/" disabled="true" onclick="return false">123</a>

<a href="/" class="btn btn-primary disabled">123n</a>

或者

2）学习如何在浏览器中使用HTML或JS启用JavaScript，或创建一个弹出窗口告诉用户在使用网站之前启用JavaScript。

有一种简单而干净的方法，如下：

<a href="/shopcart/">

  <button class="btn" disabled> Make an Order </button>

</a>

默认情况下，在<button>上使用disabled属性不会让点击事件传递到<a>元素。因此，<a>元素甚至不知道发生了一些点击事件。通过添加/删除<button>上的disabled属性来进行操作。