html中退出链接,如何禁用HTML链接

我将多种方法结合在一起，提供了一些更高级的解决方案disabled功能(它跨浏览器工作)。代码如下(ES 2015和CoffeeScript都基于您的偏好)。

这提供了多个防御级别，因此被标记为禁用的锚实际上是这样的。使用这种方法，您可以获得一个不能：点击

选项卡到并按回车

选项卡会将焦点移到下一个可调焦的元素。

它知道是否随后启用了锚点。

如何包括这个CSS，因为它是第一道防线。这假设您使用的选择器是a.disableda.disabled {

pointer-events: none;

cursor: default;}

接下来，在Ready上实例化这个类(使用可选的选择器)：new AnchorDisabler()

ES 2015级

npm install -S key.jsimport {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

}}

咖啡礼宾课：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