1單擊html后禁用href？
[英]disable href after 1 click on html?
問題描述
我希望在單擊 1 次后禁用href ，可以使用 javascript 或 jquery 完成嗎？
請幫忙。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns ="http://www.w3.org 1999 xhtml" xml :lang="en">
<head>
<style>
a:link{
color:#1DAAA1;
}
a:visited{
color:green;
}
a:hover{
background: #ff0000;
color: #FFF;
}
</style>
</head>
<body>
<table width="500" align="center" border="5px solid">
<tr align="center" >
<td><a href="http://www.google.com.my/" onclick="return false"> Google </a></td>
<td><a href="http://www.yahoo.com/"> Yahoo </a></td>
<td><a href="http://www.bing.com/"> Bing </a></td>
<td><a href="http://en.wikipedia.org/wiki/Main_Page"> Wikipedia </a></td>
<td><a href="https://www.facebook.com/"> Facebook </a></td>
</tr>
</table>
</body>
</html>
10 個解決方案
解決方案1
61 已采納 2014-01-29 20:50:40
純javascript解決方案：
<script>
function clickAndDisable(link) {
// disable subsequent clicks
link.onclick = function(event) {
event.preventDefault();
}
}
</script>
<a href="target.html" onclick="clickAndDisable(this);">Click here</a>
解決方案2
7 2013-10-03 10:13:49
這是使用jQuery防止鏈接雙擊的更簡單方法：沒有onclick屬性，不需要id ，沒有刪除href 。
$("a").click(function (event) {
if ($(this).hasClass("disabled")) {
event.preventDefault();
}
$(this).addClass("disabled");
});
提示：您可以使用任何選擇器（如button 、 input[type='submit']等），它會起作用。
解決方案3
5 2012-11-27 09:19:12
試試這個....
a:visited {
color:green;
pointer-events: none;
cursor: default;
}
解決方案4
3 2016-06-13 20:09:38
允許用戶只關注 URL 一次的純 JavaScript 解決方案：
<a id="elementId"
href="www.example.com"
onclick="setTimeout(function(){document.getElementById('elementId').removeAttribute('href');}, 1);"
>Clik and forget</a>
單擊后，這將刪除 href 屬性（等待 1 毫秒以允許原始操作開始）使鏈接靜音。 與 Dineshkani 建議的類似，但原始答案導致操作在某些瀏覽器上根本無法啟動。
解決方案5
1 2012-11-27 10:19:01
這次我用 Javascript 試過了……希望它能幫助你:) 只需在所需的 href 標簽的“onclick()”中調用以下函數……
function check(link) {
if (link.className != "visited") {
//alert("new");
link.className = "visited";
return true;
}
//alert("old");
return false;
}
像<a href="#" onclick="return check(this);">link here</a>看看演示在這里
解決方案6
0 2012-11-27 13:02:06
你可以用 jquery
<a href='http://somepage.com' id='get' onlick='$("#"+this.id).attr("href","")'>Something to be go </a>
或者使用 javascript
<a href='http://somepage.com' id='get' onlick='document.getElementById(this.id).removeAttribute("href");'>Something to be go </a>
解決方案7
0 2013-07-10 01:24:27
基於 Ayyappan Sekar 的回答，我剛剛使用 jQuery 做了一些非常相似的事情：
$('#yourId').click(function (e) {
if(!$(this).hasClass('visited'))
{
$(this).addClass('visited')
return true;
}
else
{
$(this).removeAttr("href"); // optional
// some other code here
return false;
}
});
解決方案8
0 2014-08-29 21:42:36
在 html 和 css 中復制相同的 div，復制的 div 必須低於原始的使用：z-index=-1 或/和 position:absolute。
使原始 div onclick="HideMe(this)"
JS:
<script type="text/javascript">
function HideMe(element){
element.style.display='none';
}
</script>
這可能不是最好的方法，但 100% 的目標是可以實現的。
解決方案9
0 2020-07-07 19:52:24
我想在這里留下一個適用於與 IFrame 一起使用的 Knockout.js 的示例，但由於 IFrame 不適用於本地文件，因此我使用 div 制作了此示例。 當您單擊鏈接時，該函數被調用，正如您在內部注釋的alert()看到的那樣，但是當您在輸入對話框中撥打某些內容並再次單擊該鏈接時，該 div 不會被 Knockout.js 更新，只有如果您單擊調用相同函數但具有不同參數的另一個鏈接。
<html>
<head>
<script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
</head>
<body>
<div>
<a href="javascript:fAlter(2)">Page 2</a>
</div>
<div>
<a href="javascript:fAlter(3)">Page 3</a>
</div>
<div data-bind="bindHTML: dados"></div>
<script type="text/javascript">
function myPage2(nPage) {
var cPage = '<div>Pagina 2</div>';
if (nPage == 3) { cPage = '<div>Pagina 3</div>' }
cPage += '<input type="text" id="fname" name="fname">';
//alert('clicked!');
return cPage
}
var viewModel = {
dados : ko.observable()
}
ko.bindingHandlers.bindHTML = {
init: function () {
// Prevent binding on the dynamically-injected HTML (as developers are unlikely to expect that, and it has security implications)
return { 'controlsDescendantBindings': true };
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// setHtml will unwrap the value if needed
ko.utils.setHtml(element, valueAccessor());
var elementsToAdd = element.children;
for (var i = 0; i < elementsToAdd.length; i++) {
ko.cleanNode(elementsToAdd[i]); //Clean node from Knockout bindings
ko.applyBindings(bindingContext, elementsToAdd[i]);
}
}
};
ko.applyBindings(viewModel);
viewModel.dados(myPage2(2));
function fAlter(nPage) {
viewModel.dados(myPage2(nPage));
}
</script>
</body>
</html>
解決方案10
-1 2012-11-27 10:43:40
jQuery 解決方案：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns ="http://www.w3.org 1999 xhtml" xml :lang="en">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function check(link) {
$(link).replaceWith($(link).text());
}
</script>
<style>
a:link{
color:#1DAAA1;
}
a:visited{
color:green;
}
a:hover{
background: #ff0000;
color: #FFF;
}
</style>
</head>
<body>
<table width="500" align="center" border="5px solid">
<tr align="center" >
<td><a href="http://www.google.com" target="_blank" onclick="return check(this);"> Google </a></td>
<td><a href="http://www.yahoo.com" target="_blank" onclick="return check(this);"> Yahoo </a></td>
<td><a href="http://www.bing.com" target="_blank" onclick="return check(this);"> Bing </a></td>
<td><a href="http://en.wikipedia.org" target="_blank" onclick="return check(this);"> Wikipedia </a></td>
</tr>
</table>
</body>
</html>
如何在應用點擊事件監聽器后暫時禁用 href 點擊
[英]How to temporarily disable a href click after a click eventListener is applied
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.