[javascript] JavaScript에서 href 링크를 비활성화하려면 어떻게합니까?

태그가 <a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>있고 어떤 조건에서는이 태그를 완전히 비활성화하고 싶습니다.

주석의 코드 (링크가 생성되는 방법)

if (n_index != n_pages)
    a = a+'<li><a href="#" onclick="javascript:paginateAjaxPage('+(n_index+1) +','+stype+');">></a></li><li><a href="#" onclick="javascript:paginateAjaxPage('+n_pages+','+stype+');" >>></a></li>';
else
    a = a+'<li><a style="cursor: pointer;" onclick="return false;">></a></li><li><a style="cursor: pointer;" onclick="return false" >>></a></li>';
a = a+'</ul></div>';



답변

사용자가 클릭시 리디렉션하는 것을 원하지 않을 때 시도하십시오.

<a href="javascript: void(0)">I am a useless link</a>


답변

이 스타일 클래스를 사용하여 페이지의 모든 링크를 비활성화 할 수 있습니다.

a {
    pointer-events:none;
}

이제 당연히 요령은 필요할 때만 링크를 비활성화하는 것입니다.

다음과 같이 빈 A 클래스를 사용하십시오.

a {}

그런 다음 링크를 비활성화하려면 다음을 수행하십시오.

    GetStyleClass('a').pointerEvents = "none"

    function GetStyleClass(className)
    {
       for (var i=0; i< document.styleSheets.length; i++) {
          var styleSheet = document.styleSheets[i]

          var rules = styleSheet.cssRules || styleSheet.rules

          for (var j=0; j<rules.length; j++) {
             var rule = rules[j]

             if (rule.selectorText === className) {
                return(rule.style)
             }
          }
       }

       return 0
    }

참고 : CSS 규칙 이름은 일부 브라우저에서 소문자로 변환되며이 코드는 대소 문자를 구분하므로 소문자 클래스 이름을 사용하는 것이 좋습니다.

링크를 다시 활성화하려면 :

GetStyleClass('a').pointerEvents = ""

브라우저 호환성에 대한 정보는 http://caniuse.com/pointer-events 페이지를 확인하십시오 .

나는 이것이 최선의 방법이라고 생각하지만 슬프게도 IE는 항상 그렇듯이 허용하지 않을 것입니다 🙂 어쨌든 유용 할 수있는 정보가 포함되어 있고 일부 프로젝트는 알고있는 브라우저를 사용하기 때문에 나는 이것을 게시하고 있습니다. , 모바일 장치에서 웹보기를 사용할 때와 같습니다.

하나의 링크를 비활성화하고 싶다면 (그게 질문이라는 것을 깨달았습니다), 해당 조건에 따라 현재 페이지의 URL을 수동으로 설정하거나 설정하지 않는 기능을 사용합니다. (당신이 수락 한 해결책처럼)

이 질문은 내가 생각했던 것보다 훨씬 쉬웠습니다. 🙂


답변

간단히 빈 해시를 줄 수 있습니다.

anchor.href = "#";

또는 “사용 안함”으로 충분하지 않은 경우 이벤트 핸들러를 사용하십시오.

anchor.href = "javascript:void(0)";


답변

jQuery를 사용하여 시도하십시오.

$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});


답변

anchor.href = null;


답변

(function ($) {
    $( window ).load(function() {
        $('.navbar a').unbind('click');
        $('.navbar a').click(function () {
            //DO SOMETHING
            return false;
        });
    });
})(jQuery);

이 방법을 구현하기가 더 쉽습니다. 그리고 그것은 당신이 js라는 이점이 있습니다. HTML 내부가 아니라 다른 파일에 있습니다. 바인딩 해제없이 그렇게 생각합니다. 두 이벤트 모두 여전히 활성 상태입니다. 확실하지 않다. 하지만 어떤면에서는이 이벤트 하나만 필요합니다.


답변

MDN element.removeAttribute(attrName);은 비활성화 할 때 속성을 null (또는 다른 값)로 설정하는 것보다 권장 합니다. 이 경우에는element.removeAttribute("href");

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute