是否“禁用”锚标记的有效属性

Posted 2023-03-05

【中文标题】是否“禁用”锚标记的有效属性

【英文标题】：Is 'disabled' a valid attribute for an anchor tag

【发布时间】：2013-09-13 17:08:45

【问题描述】：

如果我有以下简单的代码段：

<div ng-app="myApp">
    <a ng-disabled='true' ng-click="value1=123">click me</a>
    <button ng-disabled='true' ng-click="value2=123">click me</button>
    ==value1==
    ==value2==
</div>

正如您从小提琴中看到的那样：http://jsfiddle.net/basarat/czVPG/ 该按钮不可点击，并且 ng-click （这只是一个 jquery on('click',function()) ）不会执行。但是它确实为锚标记执行。

是因为 disabled 不是锚标记的有效属性吗？ 如果是，为什么在一个按钮没有触发的情况下，它仍然会触发 dom click 事件？

【问题讨论】：

看起来不是一个有效的属性。见dev.w3.org/html5/markup/a.html

【参考方案1】：

很遗憾，不可能。

这里的另一个不错的选择是使用 CSS！在那个禁用的链接上敲一个班级！

.disabled 
  // Prevent element being interactive / the target of pointer events.
  pointer-events: 'none';

  // Additional styles to make it 'look' disabled below
  opacity: 0.5;

More on CSS Pointer events here (MDN Web Docs)

【参考方案2】：

如果要在以后启用锚点，删除 href 或将其设置为“#”会很痛苦，因为你需要将 href 重置为它应该链接到的任何值。相反，我只是为标签添加了一个禁用属性、一个单击事件处理程序和一些 css。这样可以很容易地看到锚被禁用，但如果启用它会去哪里。

是的，锚选项卡不支持 disabled 属性，但 CSS 属性选择器确实找到了它，jQuery 也是如此。因此，虽然下面的解决方案是混合的 jQuery/javaScipt/CSS，但它确实提供了一种更好的方法来禁用/启用锚点，它支持使用 javascript 向标签动态添加/删除禁用属性。请注意，这仅经过测试并发现在 Chrome 中有效。

<style>
  a:disabled,               /* This doesn't do anything, but hopefully one day ... */
  a[disabled]               /* This activates when the disabled attribute is added. */
    
      cursor: not-allowed;  /* Indicate that the link is not to be click! */
    
</style>

<script>
  // Use the same css selectors to find all of the disabled anchors ...

  $( 'a:disabled, a[disabled]' )
  .click( function( event ) 

            //
            // Prevent disabled anchors from doing their click action ...
            //
            // Need to recheck that the anchor is still disabled, because the
            // jQuery that initially found this anchor and set this event
            // handler doesn't affect the anchor after the event is set.
            //

            // Is this anchor still disabled?

            if( this.hasAttribute( 'disabled' ) ) 

              event.preventDefault();

            

           );
</script>

这是一个 codePen 演示： https://codepen.io/howardb1/pen/XWrEKzP

【参考方案3】：

如果您不想使用 javascript 来禁用锚点（如其他响应中所建议的那样），您可以省略 hrefattribute 并且锚点将不起作用，甚至会改变它的样式.

<a>A disabled anchor</a>

注意：我知道我的回答并没有直接谈论 disable 属性，但该信息可能仍然对听众有用，就像对我一样。

【参考方案4】：

按钮是一种输入类型，这就是禁用的原因。锚的工作方式不同。 尝试给你的标签一个 id 并使用 javascript 禁用。

<div ng-app="myApp">
<a id="someid" ng-click="value1=123" >click me</a>
<button ng-disabled='true' ng-click="value2=123">click me</button>
==value1==
==value2==</div>

之后可以使用 js 禁用元素，它的行为应该与输入类型一样。

function DisableButton() 
    var submitButton = document.getElementById("someid");
    if (submitButton != null) 
        submitButton.setAttribute('disabled', 'disabled');
    

确保您获得元素的正确客户端 ID。

【参考方案5】：

阅读w3c Link和the-a-element

禁用对锚标记无效

您可以通过event.preventDefault() 来完成

$('a').click(function(event)
   event.preventDefault();
);

【讨论】：

嗨@Tushar Gupta 是否可以在 xx 秒后取消设置 event.preventDefault？

另外，为了防止锚点通过键盘导航接收焦点，在元素上设置.tabIndex = -1。

【参考方案6】：

不，它不适用于 a 标签，您可以使用 jquery event.preventDefault() referance here

【讨论】：

注意event.preventDefault() 是not jQuery only。

【参考方案7】：

Disabled 不是锚标记的有效属性。来源：http://dev.w3.org/html5/html-author/#the-a-element