javascript - Kuinka poistaa HTML-linkit käytöstä

Minulla on linkkinappi <td>-elementin sisällä, joka minun täytyy poistaa käytöstä. Tämä toimii IE:ssä, mutta ei toimi Firefoxissa ja Chromessa.

Kokeilin kaikkia seuraavia, mutta ne eivät toimi Firefoxissa (käyttäen 1.4.2 js):

$(".myLink").attr('disabled', 'disabled');

$(".myLink").attr('disabled', true);

$(".myLink").attr('disabled', 'true');

Huomautus - En voi poistaa rekisteröityä klikkaustoimintoa anchor-tagilta, koska se on rekisteröity dynaamisesti. JA MINUN ON NÄYTETTÄVÄ LINKKI POISKÄYTÖSSÄ OLEVASSA TILASSA.

Vastaus #1

Et voi poistaa linkkiä käytöstä (kannettavalla tavalla). Voit käyttää yhtä näistä tekniikoista (jokaisella on omat hyvät ja huonot puolensa).

CSS-tapa

Tämä pitäisi olla tehdä se (mutta katso myöhemmin), kun suurin osa selaimista tukee sitä:

a.disabled {
    pointer-events: none;
}

Se on sitä, mitä esimerkiksi Bootstrap 3.x tekee. Tällä hetkellä (2016) sitä tukevat hyvin vain Chrome, FireFox ja Opera (19+). Internet Explorer alkoi tukea tätä versiosta 11 lähtien, mutta ei linkeille; se on kuitenkin saatavilla ulommassa elementissä, kuten:

span.disable-links {
    pointer-events: none;
}

Kanssa :

<span class="disable-links"><a href="#">...</a></span>

Väliaikaisratkaisu

Meidän täytyy todennäköisesti määritellä CSS-luokka pointer-events: none varten, mutta entä jos käyttäisimme uudelleen disabled-attribuuttia CSS-luokan sijaan? Täsmällisesti ottaen disabled ei ole tuettu <a>-elementille, mutta selaimet eivät valita tuntemattomista attribuuteista. Käyttämällä disabled-attribuuttia IE ohittaa pointer-events-asetuksen, mutta kunnioittaa IE-spesifistä disabled-attribuuttia; muut CSS-yhteensopivat selaimet ohittavat tuntemattoman disabled-attribuutin ja kunnioittavat pointer-events-asetusta. Helpompi kirjoittaa kuin selittää:

a[disabled] {
    pointer-events: none;
}

Toinen vaihtoehto IE 11:lle on asettaa linkkielementtien display arvoksi block tai inline-block:

<a style="pointer-events: none; display: inline-block;" href="#">...</a>

Huomaa, että tämä saattaa olla siirrettävä ratkaisu, jos sinun tarvitsee tukea IE:tä (ja voit muuttaa HTML:ääsi), mutta...

Kaiken tämän sanottuani ota huomioon, että pointer-events poistaa käytöstä vain...osoitin-tapahtumat. Linkkejä voi silti navigoida näppäimistöllä, jolloin sinun täytyy myös käyttää jotakin muista täällä kuvatuista tekniikoista.

Keskittyä

Yhdessä edellä kuvatun CSS-tekniikan kanssa voit käyttää tabindex-attribuuttia ei-standardi tavalla estääksesi elementtiä saamasta fokusta:

<a href="#" disabled tabindex="-1">...</a>

En koskaan tarkistanut sen yhteensopivuutta monien selainten kanssa, joten saatat haluta testata sitä itse ennen käyttöä. Sen etuna on, että se toimii ilman JavaScriptiä. Valitettavasti (mutta ilmeisesti) tabindex-arvoa ei voi muuttaa CSS:llä.

Tallenna napsautukset

Käytä href-linkkiä JavaScript-funktioon, tarkista ehto (tai itse disabled-attribuutti) ja älä tee mitään tapauksessa.

$("td > a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});

Poistaaksesi linkit, tee näin:

$("td > a").attr("disabled", "disabled");

Ota ne uudelleen käyttöön:

$("td > a").removeAttr("disabled");

Jos haluat, voit .is("[disabled]")-metodin sijasta käyttää .attr("disabled") != undefined (jQuery 1.6+:n tapauksessa se palauttaa aina undefined, kun attribuuttia ei ole asetettu), mutta is() on paljon selkeämpi (kiitos Dave Stewartille tästä vinkistä). Huomaa, että käytän tässä disabled-attribuuttia epästandardilla tavalla; jos tämä on sinulle tärkeää, vaihda attribuutti luokaksi ja korvaa .is("[disabled]") metodilla .hasClass("disabled") (lisää ja poista luokkia käyttämällä addClass() ja removeClass()).

Tämä Zoltán Tamási huomautti kommentissaan, että "joissain tapauksissa klikkaustapahtuma on jo sidottu johonkin "oikeaan" funktioon (esimerkiksi knockoutjs-funktiota käytettäessä). Tällaisissa tapauksissa tapahtumakäsittelijöiden järjestys voi aiheuttaa ongelmia. Siksi toteutin poistettujen linkkien käsittelyn sitomalla return false käsittelijän linkin touchstart-,-, mousedown-tapahtumiin. haittoja (se estää kosketusvierityksen alkavan linkistä)", mutta näppäimistötapahtumien käsittelyssä on myös se etu, että se estää navigoinnin näppäimistöllä.

Huomaa, että jos href ei tyhjennetä, käyttäjä voi käydä kyseisellä sivulla manuaalisesti.

Tyhjennä linkki

Tyhjennä href-attribuutti. Tämän koodin avulla et lisää tapahtumakäsittelijää, vaan muutat itse linkkiä. Käytä tätä koodia linkkien poistamiseksi käytöstä:

$("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});

Ja tämä niiden uudelleen aktivoimiseksi:

$("td > a").each(function() {
    this.attr("href", this.data("href")).removeAttr("disabled");
});

Henkilökohtaisesti en pidä tästä ratkaisusta kovin paljon (jos sinun ei tarvitse tehdä enempää rikki linkkien kanssa), mutta se voi olla yhteensopivampi monien tapojen vuoksi seurata linkkiä.

Väärennetty klikkauskäsittelijä

Lisää/poista onclick-funktio, jossa return false, linkkiä ei seurata. Linkkien poistamiseksi käytöstä:

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

Ota ne uudelleen käyttöön:

$("td > a").removeAttr("disabled").off("click");

En usko, että on syytä suosia tätä ratkaisua ensimmäisen sijaan.

Muotoilu

Tyylittely on vieläkin yksinkertaisempaa, riippumatta siitä, mitä ratkaisua käytät linkin poistamiseksi käytöstä, lisäsimme disabled-attribuutin, joten voit käyttää seuraavaa CSS-sääntöä:

a[disabled] {
    color: gray;
}

Jos käytät luokkaa attribuutin sijaan:

a.disabled {
    color: gray;
}

Jos käytät käyttöliittymäkehystä, saatat huomata, että poistetut käytöstä linkit eivät näy oikein. Esimerkiksi Bootstrap 3.x käsittelee tämän tilanteen ja painike on oikein tyylitelty sekä disabled-attribuutin että .disabled-luokan kanssa. Jos sen sijaan tyhjennät linkin (tai käytät jotakin muuta JavaScript-tekniikkaa), sinun on myös käsiteltävä tyylittely, koska <a> ilman href-attribuuttia näkyy silti käyttökelpoisena.

Saavutettavat rikkaan internetin sovellukset (ARIA)

Älä unohda myös lisätä attribuuttia aria-disabled="true" yhdessä disabled-attribuutin/ luokan kanssa.

Vastaus #2

Sain korjauksen CSS:ään.

td.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:Gray;
}

Yllä oleva CSS, kun sitä sovelletaan ankkuritagille, poistaa klikkaustapahtuman käytöstä.

Lisätietoja saat tästä linkistä

Vastaus #3

Kiitos kaikille, jotka lähettivät ratkaisuja (erityisesti @AdrianoRepetti), yhdistin useita lähestymistapoja tarjotakseni hieman kehittyneempää disabled-toiminnallisuutta (ja se toimii eri selaimilla). Koodi on alla (sekä ES2015 että coffeescript, mieltymyksesi mukaan).

Tämä mahdollistaa monitasoisen suojan, jotta merkityt Ankkurit, jotka on poistettu käytöstä, käyttäytyvät todella niin. Tämän lähestymistavan avulla saat ankkurin, jota et voi:

  • klikkaa
  • välilehti asti ja paina paluu
  • Tabuloiminen siihen siirtää kohdistuksen seuraavaan kohdennettavissa olevaan elementtiin
  • se tietää, jos ankkuri otetaan myöhemmin käyttöön

Kuinka

  1. Sisällytä tämä CSS, sillä se on ensimmäinen puolustuslinja. Tämä olettaa, että käyttämäsi valitsin on a.disabled

    a.disabled {
  pointer-events: none;
  cursor: default;
}

  2. Seuraavaksi luo tämän luokan instanssi ready-vaiheessa (valinnaisella valitsimella):

      new AnchorDisabler()

ES2015-luokka

npm install -S key.js
import {Key, Keycodes} from 'key.js'

export default class AnchorDisabler {
  constructor (config = { selector: 'a.disabled' }) {
    this.config = config
    $(this.config.selector)
      .click((ev) => this.onClick(ev))
      .keyup((ev) => this.onKeyup(ev))
      .focus((ev) => this.onFocus(ev))
  }

  isStillDisabled (ev) {
    //  since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event
    let target = $(ev.target)
    if (target.hasClass('disabled') || target.prop('disabled') == 'disabled') {
      return true
    }
    else {
      return false
    }
  }

  onFocus (ev) {
    //  if an attempt is made to focus on a disabled element, just move it along to the next focusable one.
    if (!this.isStillDisabled(ev)) {
      return
    }

    let focusables = $(':focusable')
    if (!focusables) {
      return
    }

    let current = focusables.index(ev.target)
    let next = null
    if (focusables.eq(current + 1).length) {
      next = focusables.eq(current + 1)
    } else {
      next = focusables.eq(0)
    }

    if (next) {
      next.focus()
    }
  }

  onClick (ev) {
    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }

  onKeyup (ev) {
    // We are only interested in disabling Enter so get out fast
    if (Key.isNot(ev, Keycodes.ENTER)) {
      return
    }

    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }
}

Coffescript-luokka:

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

Aiheeseen liittyviä artikkeleita