Question

<html>
    <head>
    <style>
    .inactiveLink {
        pointer-events: none;
        cursor: default;
    }
    </style>
    </head>
    <body>
    <p> You have won a prize. Click <a href="https://www.google.com/" target="_blank">here</a> within <div id='clock'></div> seconds ...</p>
    <script>

    var time = 10;
    var f = function counttime(){document.getElementById('clock').innerHTML--;}
    function stoptime(){cleatInterval(f);}

    if(time){
        document.getElementById('clock').innerHTML = time;
        var h = setInterval(f,1000);
        setTimeout(function(){clearInterval(h);
                    document.getElementById('clock').innetHTML = "Time's up!";
                    }, time*1000);
    }


    </script>
    </body>
</html>

我正在尝试创建一个基本网页，该网页打开时会显示“您已赢得奖金。请在10秒内单击此处...”。您有10秒的时间单击“此处”以获取奖金。 10秒后，“此处”将不可点击。我添加了一个有关不可点击的CSS部分，称为“ inactiveLink”。我不知道我应该如何在10秒后实现将锚标记更改为JS。（我正在考虑10秒后，将HTML中的a更改为ID为inactiveLink的a）

Answer 1

您快到了：）

我将使用一个使用CSS规则pointer-events: none的类，然后在10秒钟后使用JS将该类添加到链接中：

const a = document.getElementById('a');

setTimeout(() => a.className = 'unclickable', 10000);

.unclickable { pointer-events: none; }

<a id="a" href="">Hurry up</a>

Answer 2

使用setAttribute使其不可点击。也许使用所有想要的CSS来创建一个名为“ unclickable”的类。

您可以查看this thread，以获取有关如何设置链接的更多信息，以免单击时触发事件。检查第二个答案（而不是用户标记为正确的答案）。

Answer 3

最好的方法是删除属性href .directive('packagesBrowser', function() { return { scope: { select: '=' }, templateUrl: 'packages-browser.html', controller: [ '$scope', 'Packages', 'Store', 'Inventory', function($scope, Packages, Store, Inventory) { $scope.packageOptions = {}; $scope.packages = Packages; console.log('Packages Products Called 1'); Packages.$promise.then(function() { return Packages.forEach(function(p) { if (!p.products) { return; } $scope.packageOptions[p.id] = p.products.map(function(product) { return { product_id: product.product.id, quantity: product.quantity }; }); return console.log('Packages Products Called 2'); }); }); return Store.$promise.then(function() { return $scope.available = function(id) { return (Inventory.list[id] && Inventory.list[id].available) || 0; }; }); } ] }; })。

注意：removeAttribute("href");仅阻止鼠标单击，但是如果您使用Tab键并在链接上按ENTER键，则仍会继续。

pointer-events:none

function myFunction() {
  document.getElementById("anc").removeAttribute("href");
}

Answer 4

anchor标签没有disabled属性，但是您可以采用的一种方法是将按钮的样式设置为链接。例如，有一些链接：

const buttonEl = document.querySelector('#target');
const handler = e => {
  console.log('Button is still active!');
};

buttonEl.addEventListener('click', handler);

setTimeout(() => {
  buttonEl.disabled = true;
}, 2000);

button {
  all: unset;
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

button:disabled {
  color: gray;
  cursor: not-allowed;
}

<button id="target" type="button">Click the button</button>

10秒后如何使锚点不可点击？

4 个答案: