Bir bağlantı bağlantısını nasıl tıklanamaz veya devre dışı bırakabilirsiniz?

Kullanıcı tıkladığında devre dışı bırakmak istediğim bir bağlantı bağlantım var. Veya bağlantı etiketini metnin etrafından kaldırın, ancak metni kesinlikle saklayın.

<a href='' id='ThisLink'>some text</a>

.attr("disabled", "disabled");
Devre dışı bırakılan özelliği başarıyla ekledim, ancak bağlantı yine de tıklanabilirdi ekleyerek bunu bir düğme ile kolayca yapabilirim .
Metnin altı çizilip çizilmemesi gerçekten umurumda değil.

Bir ipucu?

Yanlış müzisyene tıkladığınızda, sadece "Yanlış" eklemeli ve ardından tıklanamaz hale gelmelidir.
Tıkladığınızda ve doğru olduğunuzda, "Harika" eklemeli ve ardından tüm <a>etiketleri devre dışı bırakmalıdır .

Ne istediğini yeni anladım (umarım). İşte çirkin bir çözüm

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

En temiz yöntem, işaretçi olayları olan bir sınıf eklemektir: bir tıklamayı devre dışı bırakmak istediğinizde yok. Normal bir etiket gibi işlev görür.

.disableClick{
    pointer-events: none;
}

<a href='javascript:void(0);'>some text</a>

İşaretçi olayları CSS stilini kullanın . (Jason MacDonald'ın önerdiği gibi)

MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events adresine bakın . Çoğu tarayıcıda desteklenir.

Aşağıdaki gibi genel CSS kuralınız varsa, bağlantıya "devre dışı" niteliğinin basit bir şekilde eklenmesi işi yapar:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

$('a').removeAttr('href')

veya

$('a').click(function(){ return false})

Duruma göre değişir

Bootstrap bize .disabledsınıf sağlar. Lütfen onu kullanın.

Ancak .disabledsınıf yalnızca 'a' etiketi zaten 'btn' sınıfına sahip olduğunda çalışır. Herhangi bir eski 'a' etiketi üzerinde çalışmaz. btnO tarz çağrışımlar olduğu gibi sınıf bazı bağlamda uygun olmayabilir. Kapakları altında, .disabledsınıf setleri pointer-eventsiçin noneSaroj aryal ve Vitrilo sugested gibi, bu nedenle aynı şeyi yapmak için CSS yapabilirsiniz. (Bu tavsiye için teşekkürler, Les Nightingill).

Bir csssınıf ekleyin :

.disable_a_href{
    pointer-events: none;
}

Bunu ekleyin jquery:

$("#ThisLink").addClass("disable_a_href"); 

Bağlantı hrefetiketinden niteliği kaldırmanız yeterlidir.

En iyi yol, varsayılan eylemi önlemektir. Bağlantı etiketi durumunda, varsayılan davranış, hrefbelirtilen adrese yönlendirmedir .

Dolayısıyla aşağıdaki javascript bu durumda en iyi sonucu verir:

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});

Tıklama eylemini devre dışı bırakmak için onclick olayını kullanabilirsiniz:

<a href='' id='ThisLink' onclick='return false'>some text</a>

Veya <a>etiket dışında bir şey kullanabilirsiniz .

Jason MacDonald yorumları benim için çalıştı, Chrome, Mozila ve IE'de test edildi.

Devre dışı bırakma etkisini göstermek için gri renk eklendi.

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

Jquery, bağlantı listesindeki yalnızca ilk öğeyi seçiyordu, kimliğine sahip tüm öğeleri seçmek ve devre dışı bırakmak için meta karakter (*) ekledi #ThisLink.

$("#ThisLink*").addClass("disable_a_href"); 

Bu jQuery Kodunun tek satırını yazın

$('.hyperlink').css('pointer-events','none');

css dosyasına yazmak istiyorsanız

.hyperlink{
    pointer-events: none;
}

Stil sayfasında aşağıdaki sınıfı oluşturun:

  .ThisLink{
           pointer-events: none;
           cursor: default;
    }

Bu sınıfı size aşağıdaki gibi dinamik olarak ekleyin.

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

Bunu dene:

$('a').contents().unwrap();

Basitçe SASS'de:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

Devre dışı bırakmak için kullandığım yöntem bu, umarım yardımcı olur.

$("#ThisLink").attr("href","javascript:;");

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

Bu, bunu yapmanın başka bir yolu olabilir return false, bağlantıyı devre dışı bırakacak olan işleyici , bir tıklamadan sonra eklenecektir.

En kolay yol

HTML'nizde:

<a id="foo" disabled="true">xxxxx<a>

Js'nizde:

$('#foo').attr("disabled", false);

Nitelik olarak kullanırsanız mükemmel çalışır