时间戳

首页 > 解决方案 > 在 JavaScript 中禁用超链接的问题

javascript - 在 JavaScript 中禁用超链接的问题

问题描述

我有一个链接，一旦我单击它就需要禁用它，直到页面再次重新加载。主要目的是限制用户多次点击链接。

下面是我的链接：

<a href="/User/faces/profile.xhtml?id=20521&amp;itemNo=-1" onclick="this.disabled=true;document.body.style.cursor='wait';" style="padding: 10px 5px;">Profile</a>

这适用于 ie11，但不适用于 chrome 或 iPad。

有什么我想念的吗？任何帮助或提示表示赞赏。

标签： javascripthtml

解决方案

您不能使用disabled. 当然有一些方法可以实现它。其中之一是设置pointer-events: none每个 css （但你会失去wait它的 -cursor 样式）。还有其他一些方法，例如删除href或更改属性，但这也可能会产生副作用，具体取决于您的环境。

我的建议是仅保持布尔状态并在已单击链接时阻止执行：

const link = document.querySelector('#myLink');
let redirected = false;
link.addEventListener('click', ev => {
    if (redirected) {
        ev.preventDefault();
    } else {
        console.log('click');
        redirected = true;
        link.style.cursor = 'wait';
    }
});
<a href="http://www.google.de" target="_blank" id="myLink">My Link</a>

推荐阅读