Skip to main content
Correção para melhor entendimento
Fonte Link
andrefilipeos
  • 2,4mil
  • 2
  • 18
  • 43

Acredito que desabilitar o redirecionamento seria impossível, porém, você pode usar algumas técnicas para contornar essa situação. De inicio imaginei em alterar a classe do seu atributo <a> no cenário desejado para alguma estilização específica que bloqueie o acesso ao redirecionamento, fiz uma busca e encontrei nessa pergunta do SO onde encontrei algo parecido com o que imaginei(utilizando oa propriedade pointer-events: none;), não sei se o resultado se comporte de fato com o que você deseja, mas achei bem adequado com sua situação.

No momento em que desejar bloquear o link, você poderia alterar a classe do elemento HTML para uma classe que desabilite o link da tela, e vice versa.

Segue o exemplo:

function ajustarLink(){
        var select = document.getElementById("select").value;
        
        if(select == "h"){
            document.getElementById("link").classList.add("habilitar");
        }else if(select == "d"){
            document.getElementById("link").classList.remove("habilitar");
        }
    }
.desabilitar {
  pointer-events: none;
}

.habilitar {
  pointer-events: auto;
}
<select name="" id="select" onchange="ajustarLink();">
    <option value=" "> </option>
    <option value="h">Habilitar link</option>
    <option value="d">Desabilitar dlink</option>
</select>

<a href="#" id="link" class="desabilitar" >link disable não funciona</a>

Acredito que desabilitar o redirecionamento seria impossível, porém, você pode usar algumas técnicas para contornar essa situação. De inicio imaginei em alterar a classe do seu atributo <a> no cenário desejado para alguma estilização específica que bloqueie o acesso ao redirecionamento, fiz uma busca e encontrei nessa pergunta do SO algo parecido com o que imaginei, não sei se o resultado se comporte de fato com o que você deseja, mas achei bem adequado com sua situação.

No momento em que desejar bloquear o link, você poderia alterar a classe do elemento HTML para uma classe que desabilite o link da tela, e vice versa.

Segue o exemplo:

function ajustarLink(){
        var select = document.getElementById("select").value;
        
        if(select == "h"){
            document.getElementById("link").classList.add("habilitar");
        }else if(select == "d"){
            document.getElementById("link").classList.remove("habilitar");
        }
    }
.desabilitar {
  pointer-events: none;
}

.habilitar {
  pointer-events: auto;
}
<select name="" id="select" onchange="ajustarLink();">
    <option value=" "> </option>
    <option value="h">Habilitar link</option>
    <option value="d">Desabilitar dlink</option>
</select>

<a href="#" id="link" class="desabilitar" >link disable não funciona</a>

Acredito que desabilitar o redirecionamento seria impossível, porém, você pode usar algumas técnicas para contornar essa situação. De inicio imaginei em alterar a classe do seu atributo <a> no cenário desejado para alguma estilização específica que bloqueie o acesso ao redirecionamento, fiz uma busca e encontrei nessa pergunta do SO onde encontrei algo parecido com o que imaginei(utilizando oa propriedade pointer-events: none;), não sei se o resultado se comporte de fato com o que você deseja, mas achei bem adequado com sua situação.

No momento em que desejar bloquear o link, você poderia alterar a classe do elemento HTML para uma classe que desabilite o link da tela, e vice versa.

Segue o exemplo:

function ajustarLink(){
        var select = document.getElementById("select").value;
        
        if(select == "h"){
            document.getElementById("link").classList.add("habilitar");
        }else if(select == "d"){
            document.getElementById("link").classList.remove("habilitar");
        }
    }
.desabilitar {
  pointer-events: none;
}

.habilitar {
  pointer-events: auto;
}
<select name="" id="select" onchange="ajustarLink();">
    <option value=" "> </option>
    <option value="h">Habilitar link</option>
    <option value="d">Desabilitar dlink</option>
</select>

<a href="#" id="link" class="desabilitar" >link disable não funciona</a>

Fonte Link
andrefilipeos
  • 2,4mil
  • 2
  • 18
  • 43

Acredito que desabilitar o redirecionamento seria impossível, porém, você pode usar algumas técnicas para contornar essa situação. De inicio imaginei em alterar a classe do seu atributo <a> no cenário desejado para alguma estilização específica que bloqueie o acesso ao redirecionamento, fiz uma busca e encontrei nessa pergunta do SO algo parecido com o que imaginei, não sei se o resultado se comporte de fato com o que você deseja, mas achei bem adequado com sua situação.

No momento em que desejar bloquear o link, você poderia alterar a classe do elemento HTML para uma classe que desabilite o link da tela, e vice versa.

Segue o exemplo:

function ajustarLink(){
        var select = document.getElementById("select").value;
        
        if(select == "h"){
            document.getElementById("link").classList.add("habilitar");
        }else if(select == "d"){
            document.getElementById("link").classList.remove("habilitar");
        }
    }
.desabilitar {
  pointer-events: none;
}

.habilitar {
  pointer-events: auto;
}
<select name="" id="select" onchange="ajustarLink();">
    <option value=" "> </option>
    <option value="h">Habilitar link</option>
    <option value="d">Desabilitar dlink</option>
</select>

<a href="#" id="link" class="desabilitar" >link disable não funciona</a>