Disabilita un collegamento HREF in PHP-JavaScript

Question

Ho 4 collegamenti nella mia pagina (file .phtml) come segue

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

.

Voglio disabilitare i collegamenti Aggiungi, rinomina ed eliminare Disabilitalo da UI .

L'utente dovrebbe essere in grado di vederlo ma non deve essere eseguito alcun evento di clic (linkshould essere disattivato).

Ho usato

.

1. disable="disabled"

2. display =none;

ma non stanno servendo lo scopo.

Qualsiasi altro modo questo funzionerebbe?

Answer 1

Userei questo CSS per disabilitare visivamente un collegamento:

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

.

Quindi per disabilitare un collegamento inserire un disable di classe su li corrispondente:

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

.

Quello che fa è fondamentalmente sovrapposti un collegamento con :before di Pseudo Element trasparente.

Un'altra soluzione potrebbe utilizzare la regola pointer-events: none ma non è ben supportata in IE.

Demo: http://jsfiddle.net/lpz2z/1/

Answer 2

Se stai usando jQuery, potresti voler fare questo

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

.

Ulteriori informazioni, StackOverflow Domanda

Answer 3

Non sono sicuro che sia il modo migliore ma può fare il trucco,

Se usi

pointer-events: none; in your css 

.

o se vuoi chiamarlo da JavaScript:

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

.

a interazione disabilitata con i tuoi utenti.

Answer 4

Utilizzare il puntatore-eventi: nessuno;

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

.

Answer 5

Ci sono alcune opzioni.Con il semplice vecchio JavaScript, puoi farlo, ad esempio:

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

.

o

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

.

con jquery puoi facilmente disabilitare molti collegamenti:

<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 puoi persino usare CSS!

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

.

Anche se, non ti sorprenderebbe, cioè <= v9 (se io sono corretto) non supporta questo ... e sulla maggior parte dei browser non puoi forzare il browser a utilizzare un puntatore come cursore...

Tutto in una demo di violino!

Answer 6

Anche questo ha servito lo scopo

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

.

Come sto usando la classe ContextMenu nel mio elenco UL.