programing

HTML 링크 비활성화 방법

minecode 2022. 12. 30. 17:23
반응형

HTML 링크 비활성화 방법

.<td>Chrome에서는 하지 않습니다.IE 파이어폭스 크롬

다음을 모두 시도했지만 Firefox에서 작동하지 않았습니다(1.4.2 js 사용).

$(".myLink").attr('disabled', 'disabled');

$(".myLink").attr('disabled', true);

$(".myLink").attr('disabled', 'true');

주의 - 앵커 태그는 동적으로 등록되므로 클릭 기능을 등록 취소할 수 없습니다.비활성화 모드의 링크를 표시해야 합니다.

(휴대용) 링크를 디세블로 할 수 없습니다.이러한 기법 중 하나를 사용할 수 있습니다(각 기법에는 장점과 단점이 있습니다.

CSS 방식

대부분의 브라우저가 지원하는 경우 이 방법이 올바른 방법(나중에 참조)이어야 합니다.

a.disabled {
    pointer-events: none;
}

예를 들어 Bootstrap 3.x가 하는 일입니다.현재(2016년)는 Chrome, FireFox, Opera(19+)에서만 잘 지원됩니다.Internet Explorer는 버전 11부터 지원되기 시작했지만 링크에서는 지원하지 않지만 다음과 같은 외부 요소에서는 사용할 수 있습니다.

span.disable-links {
    pointer-events: none;
}

포함:

<span class="disable-links"><a href="#">...</a></span>

회피책

CSS의 가 있을 것입니다.pointer-events: none하지만 만약 우리가 이 모든 것을disabledCSS Attribute?하게 말하면disabled.<a>브라우저는 알 수 없는 특성 때문에 불평하지 않습니다.사용방법disabled는 IE를 합니다.pointer-events 고유의 IE에 합니다.disabledAtribut; 다른 CSS 준거 브라우저는 알 수 없는 것을 무시합니다. disabled과 명예pointer-events이 더 을 사용하다

a[disabled] {
    pointer-events: none;
}

의 은, IE 11 을 설정하는 입니다.display를 「」로 설정합니다.block ★★★★★★★★★★★★★★★★★」inline-block:

<a style="pointer-events: none; display: inline-block;" href="#">...</a>

IE 를 서포트할 필요가 있는 경우(HTML 을 변경할 수 있는 경우)에는, 이 솔루션이 포터블한 솔루션인 것에 주의해 주세요.

것은 all note all 모 、 에 、 십 、 십 、 십 、 all 。pointer-events비활성화만...포인터 이벤트키보드를 통해 링크를 탐색할 수 있으며, 여기에 설명된 다른 기술 중 하나를 적용해야 합니다.

초점

해, 「CSS」를 사용할 수 .tabindex비표준적인 방법으로 요소의 초점을 방지합니다.

<a href="#" disabled tabindex="-1">...</a>

많은 브라우저와의 호환성을 확인해 본 적이 없기 때문에 직접 테스트한 후 사용해 보시기 바랍니다.자바스크립트(그러나 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」tabindexCSS를 사용하다

클릭 가로채기

사용하다href조건(또는 디세이블아트리뷰트 자체)을 체크하고, 경우에 따라서는 아무것도 하지 말아 주세요.

$("td > a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});

링크를 디세블로 하려면 , 다음의 순서에 따릅니다.

$("td > a").attr("disabled", "disabled");

다시 활성화하려면:

$("td > a").removeAttr("disabled");

대신 당신이 원한다면.is("[disabled]")하실 수 ..attr("disabled") != undefined.6 반환됩니다(jQuery 1.6+는 반환됩니다).undefined 않은 ) 단, Atribute의 경우,is()(Dave Stewart) 이에요.please서해 the 하고 있습니다.disabled이 있는 하고 Atribute를 Atribute로 바꿉니다..is("[disabled]").hasClass("disabled")((「」를 사용한 및 addClass() ★★★★★★★★★★★★★★★★★」removeClass()를 참조해 주세요.

Zoltán Tamassi는 논평에서 "어떤 경우에는 클릭 이벤트가 이미 어떤 "실제" 함수에 결합되어 있다(예: knockojs 사용). 이 경우 이벤트 핸들러의 오더로 인해 문제가 발생할 수 있습니다. 따라서 링크 및 이벤트에 반환된 false 핸들러를 바인드함으로써 비활성화된 링크를 구현했습니다. 몇 가지 단점이 있습니다.(링크에서 터치스크롤을 시작할 수 없습니다.) 하지만 키보드 이벤트를 처리할 때 키보드 네비게이션이 되지 않는 이점도 있습니다.

「」의 경우는, 과 같이 주의해 주세요.href사용자가 수동으로 해당 페이지를 방문할 수 있는지 여부가 확인되지 않았습니다.

링크를 클리어하다

「」를 합니다.href 자체를 합니다.이 코드에서는 이벤트핸들러를 추가하지 않고 링크 자체를 변경합니다.링크를 비활성화하려면 다음 코드를 사용합니다.

$("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});

그리고 이것은 그것들을 다시 유효하게 하기 위한 것입니다.

$("td > a").each(function() {
    this.attr("href", this.data("href")).removeAttr("disabled");
});

개인적으로 이 솔루션은 별로 마음에 들지 않지만(비활성화된 링크에 대해 더 많은 작업을 수행할 필요가 없는 경우) 링크를 추적하는 방법이 다양하기 때문에 호환성이 더 높을 수 있습니다.

가짜 클릭 핸들러

'/' 추가onclick where where의 기능return false 되지 , won , , , 、 , 、 크 、 , 、 , 、 , 、 , 、 , , , , , , 。링크를 디세블로 하려면

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

다시 활성화하려면:

$("td > a").removeAttr("disabled").off("click");

나는 첫 번째 해결책보다 이 해결책을 선호할 이유가 없다고 생각한다.

스타일링

은 더 하든 간에 우리는 할 수 .어떤 솔루션을 사용하여 링크를 무효로 해도disabled 규칙을 사용할수 Atribute를 합니다.

a[disabled] {
    color: gray;
}

속성 대신 클래스를 사용하는 경우:

a.disabled {
    color: gray;
}

UI 프레임워크를 사용하는 경우 비활성화된 링크의 스타일이 올바르게 지정되지 않을 수 있습니다.예를 들어 Bootstrap 3.x는 이 시나리오를 처리하고 버튼은 다음 두 가지 방법으로 올바르게 스타일링됩니다.disabled및 「」를 사용합니다..disabledclass. JavaScript), .<a> 없이href는 유효하게 되어 있습니다.

액세스 가능한 리치 인터넷 애플리케이션(ARIA)

도 꼭 .aria-disabled="true" disabled성/ / 클클클클

css에서 수정했습니다. 

td.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:Gray;
}

위의 css를 앵커태그에 적용하면 클릭 이벤트가 비활성화됩니다.

자세한 내용은 이 링크를 참조하십시오.

을 분들 에, 저는 고도의 어프로치를 하기 위해 했습니다.disabled둘 다).ES2015 공동 설명자

이를 통해 비활성화 표시된 앵커가 실제로 이와 같이 동작하도록 여러 수준의 방어 기능을 제공합니다.이 방법을 사용하면 다음과 같은 앵커를 얻을 수 없습니다.

  • 찰칵찰칵
  • 탭과 히트 리턴
  • 탭으로 이동하면 포커스가 다음으로 초점을 맞출 수 있는 요소로 이동합니다.
  • 나중에 앵커가 활성화되는지 여부를 인식합니다.

방법

  1. css를 사용하다하는 셀렉터가 " " "인 것으로 가정합니다.a.disabled

    a.disabled {
  pointer-events: none;
  cursor: default;
}

  2. 다음으로 다음 클래스를 준비 시 인스턴스화합니다(옵션 셀렉터 사용).

      new AnchorDisabler()

ES2015 클래스

npm install -S key.js

import {Key, Keycodes} from 'key.js'

export default class AnchorDisabler {
  constructor (config = { selector: 'a.disabled' }) {
    this.config = config
    $(this.config.selector)
      .click((ev) => this.onClick(ev))
      .keyup((ev) => this.onKeyup(ev))
      .focus((ev) => this.onFocus(ev))
  }

  isStillDisabled (ev) {
    //  since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event
    let target = $(ev.target)
    if (target.hasClass('disabled') || target.prop('disabled') == 'disabled') {
      return true
    }
    else {
      return false
    }
  }

  onFocus (ev) {
    //  if an attempt is made to focus on a disabled element, just move it along to the next focusable one.
    if (!this.isStillDisabled(ev)) {
      return
    }

    let focusables = $(':focusable')
    if (!focusables) {
      return
    }

    let current = focusables.index(ev.target)
    let next = null
    if (focusables.eq(current + 1).length) {
      next = focusables.eq(current + 1)
    } else {
      next = focusables.eq(0)
    }

    if (next) {
      next.focus()
    }
  }

  onClick (ev) {
    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }

  onKeyup (ev) {
    // We are only interested in disabling Enter so get out fast
    if (Key.isNot(ev, Keycodes.ENTER)) {
      return
    }

    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }
}

Cofescript 클래스:

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

요소를 시험합니다.

$(td).find('a').attr('disabled', 'disabled');

Chrome:http://jsfiddle.net/KeesCBakker/LGYpz/에서 링크를 비활성화하면 됩니다.

파이어폭스는 잘 작동하지 않는 것 같다.다음 예시는 동작합니다.

<a id="a1" href="http://www.google.com">Google 1</a>
<a id="a2" href="http://www.google.com">Google 2</a>

$('#a1').attr('disabled', 'disabled');

$(document).on('click', 'a', function(e) {
    if ($(this).attr('disabled') == 'disabled') {
        e.preventDefault();
    }
});

참고: 향후 비활성화/활성화 링크를 위해 '라이브' 문을 추가했습니다.
2: 'live' (온(on)

4은 4.1이라는 이름의 합니다.disabled ★★★★★★★★★★★★★★★★★」aria-disabled="true"여하하다

예"

<a href="#" 
        class="btn btn-primary btn-lg disabled" 
        tabindex="-1" 
        role="button" aria-disabled="true"
>
    Primary link
</a>

자세한 것은, getbootstrap.com 를 참조해 주세요.

역동적으로 만들고 싶다면you don't want to care if it is button or ancorJS에 관한 것입니다.

   let $btn=$('.myClass');
   $btn.attr('disabled', true);
   if ($btn[0].tagName == 'A'){
        $btn.off();
        $btn.addClass('disabled');
        $btn.attr('aria-disabled', true);
   }

하지만 조심해라

은 클래스가 합니다.btn btn-link.

에서는 ""를 사용하는 이 권장되는 가 있습니다.card-linkclass, 이 경우 솔루션은 작동하지 않습니다.

.<a href="..." disabled="disabled"> " " " " "<a href="..." class="disabled">:

CSS 스타일:

a[disabled=disabled], a.disabled {
    color: gray;
    cursor: default;
}

a[disabled=disabled]:hover, a.disabled:hover {
    text-decoration: none;
}

Javascript(jQuery 준비):

$("a[disabled], a.disabled").on("click", function(e){

    var $this = $(this);
    if ($this.is("[disabled=disabled]") || $this.hasClass("disabled"))
        e.preventDefault();
})

css 속성을 추가합니다.

<style>   
a {
 pointer-events: none;
}
</style>

이렇게 하면 앵커 태그를 비활성화할 수 있습니다.

면도기(.cshtml)에서 다음을 수행할 수 있습니다.

@{
    var isDisabled = true;
}

<a href="@(isDisabled ? "#" : @Url.Action("Index", "Home"))" @(isDisabled ? "disabled=disabled" : "") class="btn btn-default btn-lg btn-block">Home</a>

다음과 같이 HTML 링크를 비활성화할 수 있습니다.

<style>
    .disabled-link {
        pointer-events: none;
    }
</style>
<a href="https://google.com" class="disabled-link">Google.com</a>

인라인 JavaScript를 사용할 수 있습니다.

<a href="javascript:void(0)">Google.com</a>

할 수 하려면 , 「클릭 이벤트」를 .클릭 이벤트가 발생하지 않도록 하려면 단순히Removeaction링크를 클릭합니다.

$(td).find('a').attr('href', '');

상세정보 :- 디세블로 할 수 있는 요소

저는 이런 걸 할 거예요.

$('td').find('a').each(function(){
 $(this).addClass('disabled-link');
});

$('.disabled-link').on('click', false);

이런 게 효과가 있을 거야비활성화할 링크에 대한 클래스를 추가한 후 다른 사용자가 링크를 클릭하면 false가 반환됩니다.활성화하려면 클래스를 삭제하십시오.

터치 디바이스의 다른 페이지에 액세스하기 위한 링크를 비활성화하려면:

if (control == false)
  document.getElementById('id_link').setAttribute('href', '#');
else
  document.getElementById('id_link').setAttribute('href', 'page/link.html');
end if;

링크를 버튼으로 바꾸고 '비활성화' 속성을 사용할 것을 권장합니다.링크를 버튼으로 변환하는 방법을 확인하려면 다음 문제를 볼 수 있습니다.링크 역할을 하는 HTML 단추를 만드는 방법

이를 통해 asp.net의 하이퍼링크 또는 html 링크버튼을 비활성화할 수 있습니다.

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

다른 방법이 하나 있는데 내가 가장 좋아하는 방법이 있다.기본적으로 Lightbox가 div를 배치하고 z-index를 만지작거림으로써 페이지 전체를 비활성화하는 것과 같습니다.여기 내 프로젝트의 관련 부분들이 있다.이것은 모든 브라우저에서 동작합니다!!!!!

Javascript(jQuery):

var windowResizer = function(){
        var offset = $('#back').offset();   
        var buttontop = offset.top;
        var buttonleft = offset.left;
        $('#backdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
        offset = $('#next').offset();
        buttontop = offset.top;
        buttonleft = offset.left;
        $('#nextdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
}

$(document).ready(function() {
    $(window).resize(function() {   
        setTimeout(function() {
            windowResizer();
        }, 5); //when the maximize/restore buttons are pressed, we have to wait or it will fire to fast
    });
});

및 html로

<a href="" id="back" style="float: left"><img src="images/icons/back.png" style="height: 50px; width: 50px" /></a>
<a href="" id="next" style="float: right"><img src="images/icons/next.png" style="height: 50px; width: 50px" /></a>
<img id="backdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>
<img id="nextdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>

따라서 리사이저는 앵커 위치(이미지는 화살표일 뿐)를 찾아 디세이블러를 맨 위에 배치합니다.Disabler 이미지는 반투명한 회색 정사각형(링크에 맞게 HTML에서 Disabler의 너비/높이 변경)으로 비활성화되었음을 나타냅니다.플로팅을 통해 페이지의 크기를 동적으로 변경할 수 있으며, windowResizer()의 디세블러는 이에 따릅니다.구글을 통해 적합한 이미지를 찾을 수 있습니다.간단하게 하기 위해서, 관련하는 css를 인라인에 배치했습니다.

어떤 조건에 따라서는

$('#backdisabler').css({'visibility':'hidden'});
$('#nextdisabler').css({'visibility':'visible'});

이 노래에 대해서요.를 추가할 수 있습니다.disabled_link.
에 "css"를 합니다..disabled_link { display: none }
Boom 이제 사용자는 링크를 볼 수 없기 때문에 클릭하는 것을 걱정할 필요가 없습니다. 어떤 를 취할 jQuery를합니다.jQuery는 jQuery를 사용합니다.
$("a.disabled_link").removeClass("super_disabled")쾅!

언급URL : https://stackoverflow.com/questions/10276133/how-to-disable-html-links

반응형
저작자표시 (새창열림)

'programing' 카테고리의 다른 글

python 키워드 "with"는 무엇에 사용됩니까?  (0) 2023.01.04
왜 날짜는 1970년 1월 1일부터 계산됩니까?  (0) 2023.01.04
진동 시뮬레이션(예: 에서)웹페이지에서 마우스로 파킨슨병)을 앓고 있습니까?  (0) 2022.12.30
PDO 쿼리에서 배열을 IN() 조건에 바인드할 수 있습니까?  (0) 2022.12.30
선언에 없는 경우 어레이 초기화 구문  (0) 2022.12.30

'programing'의 다른글

  • 현재글HTML 링크 비활성화 방법

관련글

댓글

티스토리툴바