单击后禁用href

时间:2015-05-26 23:14:37

标签: javascript html

我试图在一次点击后禁用html链接。 我找到了一些解决方案,但似乎它们对我的代码不起作用。 这是我试图做的:

<html>
<script type="text/javascript">
function image(url) 
{
    var img = document.createElement("IMG");
    var url = "http://www.luigimelisi.com/wp-content/uploads/2014/03/url_routing.jpg";
    img.src = url;
    document.getElementById('image').appendChild(img);
}
function clickAndDisable(link) 
{
    link.onclick = function(event) 
    {
        e.preventDefault();
    }
}
</script>
<body>
<div id="image"></div>
<div><a href="javascript:image();"onclick="clickAndDisable(this);">Click Here</a></div>
</body>
</html>

我该如何解决?

5 个答案:

答案 0 :(得分:1)

在clickAndDisable函数和onclick处理程序中,事件(在本例中为“e”)不作为参数传递。你传入'event'但引用'e'。你可以通过将'e'改为'event'来完成这项工作。这就是您的代码可能看起来的样子:

link.onclick = function(event) {
    event.preventDefault();
};

答案 1 :(得分:1)

实际上,您的代码将以您希望的方式工作。你刚刚写了一个错字。你犯的错误在于函数&quot; clickAndDisable&#39;你通过传递一个参数&#39; event来处理一个事件,但是你试着通过调用e.preventDefault来利用这个事件。

要修复,请将e.preventDefault()更改为event.preventDefault()

以下是JSFiddle的工作代码或测试:https://jsfiddle.net/y6ktL4af/

<html>
<script type="text/javascript">
function image(url) 
{
    var img = document.createElement("IMG");
    var url = "http://www.luigimelisi.com/wp-content/uploads/2014/03/url_routing.jpg";
    img.src = url;
    document.getElementById('image').appendChild(img);
}
function clickAndDisable(link) 
{
    link.onclick = function(event) 
    {
        event.preventDefault();
    }
}
</script>
<body>
<div id="image"></div>
<div><a href="javascript:image();"onclick="clickAndDisable(this);">Click Here</a></div>
</body>
</html>

答案 2 :(得分:0)

我认为您可以通过删除href标记的a属性,然后修改clickAndDisable()函数来执行以下操作来解决此问题:

link.onclick = null;
image();

答案 3 :(得分:0)

一种可能的方法是将var valid2 = if(value === value2){ car.color }元素中的onclick语句更改为:

a

这会将超链接的onclick="this.href=''" 更改为空,因此单击链接时没有任何反应。它还消除了href功能的需要。这是残疾人的意思吗?

答案 4 :(得分:0)

有几种方法可以通过禁用或隐藏链接来解决这个问题,但可重用的方法是将事件处理程序附加到应该只点击一次的所有链接:

var oneClickEls = document.querySelectorAll('[data-allow-one-click="true"]');

var _i, _len, _el;
for ( _i = 0, _len = oneClickEls.length; _i < _len; _i++ ) {
  _el = oneClickEls[_i];
  _el.hasBeenClicked = false;
  _el.addEventListener('click', function(event) {
    if (this.hasBeenClicked) {
      event.preventDefault();
      return;
    }

    this.hasBeenClicked = true;
  });
}

这将允许我们通过添加名为data-allow-one-click的属性来指定只应在html中单击哪些链接:

<a href="javascript:doSomething();" data-allow-one-click="true">Click Here</a>

这是一个显示您的代码工作的小提琴:https://fiddle.jshell.net/1akdp6sp/