Deshabilitar enlaces href en php-javascript

Question

Tengo 4 enlaces en mi página (archivo .phtml) de la siguiente manera

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

Quiero desactivar los enlaces para agregar, cambiar el nombre y eliminar.Simplemente deshabilítelo desde la interfaz de usuario .

El usuario debería poder verlo, pero no se debería realizar ningún evento de clic (los enlaces deberían estar atenuados).

He usado

1. disable="disabled"

2. display =none;

pero no cumplen su propósito.

¿Alguna otra forma de que esto funcione?

Answer 1

Usaría este CSS para deshabilitar visualmente un enlace:

.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;
}

Luego para deshabilitar un enlace pondrías una clase disable en correspondiente li:

<li class="download disable"><a href="#download">Download</a></li>

Lo que hace básicamente es superponer un enlace con un pseudoelemento transparente. :before.

Otra solución podría ser usar pointer-events: none regla pero no es bien compatible con IE.

Manifestación: http://jsfiddle.net/LPz2Z/1/

Answer 2

Si está utilizando JQery, es posible que desee hacer esto

$(function() {
 $('#addbtn').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
 });
}

Más información, StackOverflow Pregunta

Answer 3

No estoy seguro de que sea la mejor manera, pero puede hacer el truco,

si usa

pointer-events: none; in your css 

O si desea llamarlo desde JavaScript:

elem.style.display.pointerEvents = "none";

a la interacción con desactivación con sus usuarios.

Answer 4

Use Pointer-Events: Ninguno;

<a  style='pointer-events:none;background-color:#CFCFCF;color:#000' href="javascript: void(0)">Delete</a>

Answer 5

Hay algunas opciones.Con JavaScript simple, puede hacer, por ejemplo:

<a href="mylink.html" onclick="return false;">Download</a>

o

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

Con jQuery puede deshabilitar fácilmente muchos enlaces:

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

¿Y incluso puedes usar CSS!

<a href="mylink.html" class="disabled">Download</a>
<style type="text/css">
    a.disabled { pointer-events: none; }
</style>

Aunque, no te sorprendería, es decir, <= V9 (si soy correcto) no admite esto ... y en la mayoría de los navegadores, no puede forzar al navegador a usar un puntero como cursor...

¡Todo en una demostración de Fiddle!

Answer 6

Incluso esto sirvió el propósito

$("#fileMenu").disableContextMenuItems('#add');
  $("#fileMenu").disableContextMenuItems('#rename');
  $("#fileMenu").disableContextMenuItems('#delete');

Como estoy usando la clase de contextMenu en mi lista de UL.