Como desativo um link href em JavaScript?

Eu tenho uma tag <a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>e, em algumas condições, quero que ela seja totalmente desativada.

Código de comentários (é assim que o link é gerado)

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>';

Experimente quando não quiser que o usuário redirecione ao clicar

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

você pode desativar todos os links em uma página com esta classe de estilo:

a {
    pointer-events:none;
}

agora é claro que o truque é desativar os links somente quando você precisar, desta forma:

use uma classe A vazia, como esta:

a {}

então, quando você quiser desativar os links, faça o seguinte:

    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
    }

NOTA: Os nomes das regras CSS são transformados em minúsculas em alguns navegadores, e este código diferencia maiúsculas de minúsculas, então é melhor usar nomes de classes em minúsculas para isso

para reativar links:

GetStyleClass('a').pointerEvents = ""

verifique esta página http://caniuse.com/pointer-events para obter informações sobre compatibilidade do navegador

Acho que essa é a melhor maneira de fazer isso, mas infelizmente o IE, como sempre, não vai permitir :) Estou postando de qualquer maneira, porque acho que contém informações que podem ser úteis e porque alguns projetos usam um navegador conhecido , como quando você usa visualizações da web em dispositivos móveis.

se você quiser apenas desativar UM link (só percebo que é a pergunta), eu usaria uma função que define manualmente a url da página atual, ou não, com base nessa condição. (como a solução que você aceitou)

esta pergunta foi muito mais fácil do que eu pensava :)

Você pode simplesmente fornecer um hash vazio:

anchor.href = "#";

ou se isso não for bom o suficiente para "desativar", use um manipulador de eventos:

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

Tente isso usando 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);

Acho essa forma mais fácil de implementar. E tem a vantagem de você js. Não está dentro do seu html, mas em um arquivo diferente. Acho que sem desvincular. Ambos os eventos ainda estão ativos. Não tenho certeza. Mas de certa forma, você só precisa deste evento

O MDN recomenda element.removeAttribute(attrName);definir o atributo como nulo (ou algum outro valor) quando você deseja desativá-lo. Neste caso seriaelement.removeAttribute("href");

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

A maneira mais fácil de desabilitar um link é simplesmente não mostrá-lo. Execute esta função sempre que quiser testar se sua condição é atendida para ocultar o botão Anterior (substitua if (true)pela sua condição):

var testHideNav = function() {
    var aTags = document.getElementsByTagName('a'),
        atl = aTags.length,
        i;

    for (i = 0; i < atl; i++) {
        if (aTags[i].innerText == "Previous") {
            if (true) { // your condition to disable previous
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        } else if (aTags[i].innerText == "Next") {
            if (false) { // your condition to disable next
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        }
    }
};

Em seguida, execute testHideNav()sempre que precisar verificar se sua condição mudou.

Use um span e um onclick javascript. Alguns navegadores "saltam" se você tiver um link e "#" href.

Isso também é possível:

<a href="javascript:void(0)" onclick="myfunction()">

O link não vai a lugar nenhum por sua função será executada.

Eu tinha uma necessidade semelhante, mas minha motivação era evitar que o link fosse clicado duas vezes. Consegui usando jQuery:

$(document).ready(function() {
    $("#myLink").on('click', doSubmit);
});

var doSubmit = function() {
    $("#myLink").off('click');
    // do things here
};

O HTML se parece com isto:

<a href='javascript: void(0);' id="myLink">click here</a>

Portanto, as soluções acima fazem com que o link não funcione, mas não torne visível (AFAICT) que o link não é mais válido. Eu tenho uma situação em que tenho uma série de páginas e desejo desabilitar (e deixar claro que está desabilitado) o link que aponta para a página atual.

Assim:

window.onload = function() {
    var topics = document.getElementsByClassName("topics");
    for (var i = topics.length-1; i > -1; i-- ) {
        for (var j = topics[i].childNodes.length-1; j > -1; j--) {
             if (topics[i].childNodes[j].nodeType == 1) {
                if (topics[i].childNodes[j].firstChild.attributes[0].nodeValue == this.n_root3) {
                    topics[i].childNodes[j].innerHTML = topics[i].childNodes[j].firstChild.innerHTML;
                }
            }
        }
    }
}

Isso percorre a lista de links, encontra aquele que aponta para a página atual (o n_root3 pode ser uma coisa local, mas imagino que documentdeve ter algo semelhante) e substitui o link pelo conteúdo do texto do link.

HTH

Obrigado a todos ...

Meu problema foi resolvido pelo código abaixo:

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

Instale este plugin para jquery e use-o

http://plugins.jquery.com/project/jqueryenabledisable

Ele permite que você desabilite / habilite praticamente qualquer campo da página.

Se você quiser abrir uma página em alguma condição, escreva uma função java script e chame-a de href. Se a condição for satisfeita, você abre a página, caso contrário, não faça nada.

código é parecido com este:

<a href="javascript: openPage()" >Click here</a>

and function:
function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
}

Você também pode colocar o link em um div e definir a propriedade display do atributo Style como none. isso ocultará o div. Por exemplo,

<div id="divid" style="display:none">
<a href="Hiding Link" />
</div>

Isso ocultará o link. Use um botão ou uma imagem para tornar este div visível agora, chamando esta função em onclick como:

<a href="Visible Link" onclick="showDiv()">

and write the js code as:

function showDiv(){
document.getElememtById("divid").style.display="block";
}

Você também pode colocar uma tag de id na tag html, para que seja

<a id="myATag" href="whatever"></a>

E obtenha este id no seu javascript usando

document.getElementById("myATag").value="#"; 

Um desses deve funcionar com certeza haha

Outro método para desativar o link

element.removeAttribute('href');

a tag âncora sem href reagiria como texto simples / desabilitado

<a> w/o href </a>

ao invés de <a href="#"> with href </a>

veja jsFiddel

espero que isso seja importante.

Em vez de vazio, você também pode usar:

<a href="javascript:;">this link is disabled</a> 

0) é melhor você lembrar que Alguns navegadores "pulam" se você tem um link e "#" href. Portanto, a melhor maneira seria um JavaScript personalizado

1) Se você prefere o JavaScript personalizado , aqui está:

<a href="#" onclick="DoSomething(); return false;">Link</a>

O "retorno falso" impede que o link seja realmente seguido.

2) Você pode evitar usar o seguinte

<a href="javascript:void(0);" onclick="DoSomething();">Link</a>

ou

  <a href="javascript:;" onclick="DoSomething();">Link</a>

Porque o pseudo-protocolo javascript pode colocar a página em um estado de espera em alguns navegadores, o que pode ter consequências inesperadas. O IE6 é conhecido por isso. Mas se você não se importa com o IE6 e está testando tudo, pode ser uma boa solução.

3) Se você já tem jQuerye está bootstrapem seu projeto, pode pensar em usá-los da seguinte forma:

$('.one-click').on("click", function (e) {
   $( this ).addClass('disabled');
});

Onde .disabled classe vem do bootstrap.

Site de bootstrap do formulário Qupte ( aqui )

Advertência de funcionalidade de link

A classe .disabled usa pointer-events: nonepara tentar desabilitar a funcionalidade de link de s, mas essa propriedade CSS ainda não foi padronizada. Além disso, mesmo em navegadores que suportam eventos de ponteiro: nenhum, a navegação do teclado permanece inalterada, o que significa que usuários de teclado com visão e usuários de tecnologias assistivas ainda serão capazes de ativar esses links. Portanto, por segurança, adicione um tabindex="-1"atributo a esses links (para evitar que recebam o foco do teclado) e use custom JavaScriptpara desabilitar sua funcionalidade.

e custom JavaScriptfoi mostrado na seção 1

Código abaixo para links desativados:

<a href="javascript: void(0)">test disabled link</a> 

outra solução muito simples é:

<a href="#">test disabled link</a>

A primeira solução é eficiente.