Desativar a href links em php-javascript
-
02-01-2020 - |
Pergunta
Eu tenho 4 links na minha página(.phtml arquivo) da seguinte forma
<ul id="fileMenu" class="contextMenu">
<li class="add"><a id ="addbtn" href="#add" style="display:none;">Add</a></li>
<li class="download"><a href="#download">Download</a></li>
<li class="rename"><a href="#rename">Rename</a></li>
<li class="del"><a href="#delete">Delete</a></li>
<li class="copypath"><a href="#copypath">Copypath</a></li>
</ul>
Quero desativar a adicionar,renomear e excluir links Apenas desativá-lo a partir da INTERFACE do usuário .
O usuário deve ser capaz de vê-lo, mas não clique em evento deve ser realizado(linksshould ser acinzentado) .
Eu tenho usado
disable="disabled"
display =none;
mas eles não estão servindo ao propósito.
Qualquer outro caminho este iria trabalhar fora ?
Solução
Eu usaria esse CSS visualmente desativar um link:
.disable {
position: relative;
}
.disable:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
}
.disable a {
color: gray;
cursor: default;
}
Em seguida, a fim de desativar um link que você iria colocar uma classe disable
no correspondente li
:
<li class="download disable"><a href="#download">Download</a></li>
O que ele faz é, basicamente, sobreposições um link com transparente pseudo elemento :before
.
Outra solução poderia ser a utilizar pointer-events: none
regra, mas não é bem suportado no IE.
Demonstração: http://jsfiddle.net/LPz2Z/1/
Outras dicas
Se você estiver usando o jQuery, você pode querer fazer isso
$(function() {
$('#addbtn').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
}
eu não tenho certeza se é a melhor forma, mas ele pode fazer o truque ,
se você usar
pointer-events: none; in your css
ou, se você quiser chamá-lo a partir de javascript:
elem.style.display.pointerEvents = "none";
a deficiência de interação com seus usuários.
Usar o ponteiro-eventos:none;
<a style='pointer-events:none;background-color:#CFCFCF;color:#000' href="javascript: void(0)">Delete</a>
Existem algumas opções.Com plain old javascript, você pode fazer, por exemplo:
<a href="mylink.html" onclick="return false;">Download</a>
ou
<a href="javascript: void(0);">Download</a>
Com jQuery, você pode facilmente desabilitar um monte de links:
<a href="mylink.html" class="disabled">Download</a>
<a href="anotherlink.html" class="disabled">Delete</a>
<script>
jQuery(document).ready(function($) {
$('a.disabled').on('click', function(e) {
e.preventDefault();
});
});
</script>
E você ainda pode usar o CSS!
<a href="mylink.html" class="disabled">Download</a>
<style type="text/css">
a.disabled { pointer-events: none; }
</style>
Embora, não seria surpresa você, ou seja, <= v9 (se eu estiver correto) não oferece suporte a esta...E na maioria dos navegadores, você não pode forçar o navegador para usar um ponteiro como um cursor...
Mesmo que isso servia o propósito
$("#fileMenu").disableContextMenuItems('#add');
$("#fileMenu").disableContextMenuItems('#rename');
$("#fileMenu").disableContextMenuItems('#delete');
como eu estou usando a classe contextMenu na minha lista ul.