單擊一次後禁用href

我試圖禁用一個單擊後的HTML鏈接。我發現了一些解決方案，但似乎它們不適用於我的代碼。這裏是我試圖做的：單擊一次後禁用href

<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>

我怎樣才能解決呢？

來源

2015-05-26 Sergio

你能否澄清來的問題是什麼？該鏈接是否第一次無法正常工作，還是始終有效？ – kabiroberai

它始終在工作，每次單擊它時都會顯示圖像，而我只想在第一次單擊時顯示它，然後禁用該鏈接。對不起，我的英語 – Sergio

不要禁用錨點，只要刪除它或用JavaScript隱藏即可。 – jordiburgos

我想你可以通過刪除a標籤的href屬性，然後修改clickAndDisable()功能做這樣的事情解決這個問題：

link.onclick = null; 
image();

來源

2015-05-26 23:31:10 kabiroberai

在你clickAndDisable功能和onclick處理程序，事件（在這種情況下'e'）不被作爲參數傳遞。你傳入'事件'但是引用'e'。您可以通過將'e'更改爲'event'來完成此項工作。這是你的代碼是什麼樣子的，爲了工作：

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

來源

2015-05-26 23:41:03 mFeldman

一個可能的方法是在a元素onclick聲明更改爲類似：

onclick="this.href=''"

這改變的href超鏈接什麼都不做，所以當點擊鏈接時沒有任何反應。它也消除了對clickAndDisable功能的需要。這是你的意思是禁用？

來源

2015-05-26 23:43:49 bcdan

有幾種方法可以禁用或隱藏鏈接，但一個可重用的人會是一個事件處理程序附加到應該被點擊一次的所有鏈接解決這個問題：

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>

這裏是在你的代碼的工作一個js小提琴：https://fiddle.jshell.net/1akdp6sp/

來源

2015-05-26 23:51:43 rsnorman15

實際上，你的代碼將以你期望的方式工作。你只是犯了一個錯字。您所犯的錯誤是在函數'clickAndDisable'中，您通過傳遞參數'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>

來源

2015-05-26 23:58:47 Quest

單擊一次後禁用href

回答

相關問題