앵커 태그의 유효한 특성 '비활성화'입니까?

앵커 태그의 유효한 특성 '비활성화'입니까?

다음과 같은 간단한 코드 세그먼트가 있는 경우:

<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는 앵커 태그의 유효한 속성이 아니기 때문입니까?
• 이 경우 버튼이 작동하지 않는데 돔 클릭 이벤트가 계속 트리거되는 이유는 무엇입니까?

w3c 링크 및 요소 확인

앵커 태그에서는 disable이 유효하지 않습니다.

대신 event.proventDefault()로 실행할 수 있습니다.

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

사용 안 함은 앵커 태그에 유효한 특성이 아닙니다.출처 : http://dev.w3.org/html5/html-author/ #the-a-backets

javascript를 사용하여 앵커(다른 응답에서 prupped)를 비활성화하지 않을 경우 속성을 생략하면 앵커는 동작하지 않고 스타일도 변경할 수 있습니다.

<a>A disabled anchor</a>

주의: 제 답변이 직접적인 내용은 아니라는 것을 알고 있습니다.disable저도 그랬지만 청력에는 도움이 될 수 있을 것 같아요.

아니요, 와는 동작하지 않습니다.ajquery를 사용할 수 있는 태그event.preventDefault() 여기서의 참조

버튼은 입력 유형이기 때문에 비활성화할 수 있습니다.앵커는 똑같이 작동하지 않습니다.태그에 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가 올바른지 확인합니다.

나중에 앵커를 이노블로 할 경우 href를 링크하는 값으로 리셋해야 하기 때문에 실제로 디세블로 할 때 href를 삭제하거나 '#'으로 설정하는 것은 다소 번거로운 일입니다.대신 태그에 disable Atribute를 추가하고 클릭 이벤트핸들러와 css를 추가합니다.이렇게 하면 앵커가 비활성화되어 있는 것을 쉽게 알 수 있지만, 활성화 되어 있는 경우 앵커가 어디로 이동하는지 알 수 있습니다.

네, 디세이블은 앵커탭에서는 지원되지 않지만 CSS Atribut Selector가 검출하고 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>

다음은 코드펜 데모입니다.https://codepen.io/howardb1/pen/XWrEKzP

불행하게도 가능하지 않다.

여기서 또 하나의 좋은 옵션은 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;
}

CSS 포인터 이벤트에 대한 자세한 내용은 이쪽(MDN Web Docs)

언급URL : https://stackoverflow.com/questions/18711317/is-disabled-a-valid-attribute-for-an-anchor-tag