Javascript 单击时禁用图像链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12309985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable image link on click
提问by Lock
I have a image that links to a page. This is a process button which can take up to 20 seconds to run. I want to prevent the user from pushing it more than once.
我有一个链接到页面的图像。这是一个过程按钮，最多可能需要 20 秒才能运行。我想防止用户多次推送它。
How would I write a Javascript that when the button is pushed, it would follow the hyperlink, but the link for the button would disable, and the image would change?
我将如何编写一个 Javascript，当按钮被按下时，它会跟随超链接，但按钮的链接将禁用，图像会改变？
采纳答案by Lock
I ended up going with the following:
我最终采用了以下方法：
$(document).ready(function() {
var isSubmitted = false;
$("#submit").click(function(e) {
if ( ! isSubmitted ) {
isSubmitted = true;
var src = $(this).attr("src").replace("gold","red");
$(this).attr("src", src);
} else {
e.preventDefault();
}
});
});
回答by Sparky
<script>
function buttonClicked()
{
document.getElementById('buttonImage').src = 'new-image.jpg';
document.getElementById('buttonId').disabled = true;
}
</script>
<a id="buttonId" href="next-page.html" onclick="return buttonClicked()"><img id="buttonImage" src="image1.jpg"></a>
回答by ews2001
From your question, it sounds like your "button" is the image that you click on...if that's true then you can use the following:
从你的问题来看，听起来你的“按钮”是你点击的图像......如果这是真的，那么你可以使用以下内容：
<a id="my_link" href="/page_to_vist_onclick"><img id="my_image"></a>
Then your javascript would be:
那么你的 javascript 将是：
document.getElementById('my_link').onclick = function() {
document.getElementById('my_link').disabled = true;
document.getElementById("my_image").src='the_path_to_another_image';
};
回答by chharvey
On click, remove the hrefattribute from the aelement.
单击时，href从a元素中删除属性。
回答by blasteralfred Ψ
Here is a really simple one for you
这是一个非常简单的给你
in your JS
在你的 JS 中
function Create(){
document.write('<INPUT disabled TYPE="button" value="Click Me!">');
}
in your HTML
在你的 HTML 中
<INPUT TYPE="button" value="Click Me!" onclick="Create()">
If you are ready to use jQuery, then here is another solution.
如果您准备好使用 jQuery，那么这里是另一种解决方案。
$("selectorbyclassorbyIDorbyName").click(function () {
$("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});
select the button and by its id or text or class ... it just disables after 1st click and enables after 20 Milli sec
选择按钮并通过其 id 或文本或类...它只是在第一次点击后禁用并在 20 毫秒后启用
Works very well for post backs n place it in Master page, applies to all buttons without calling implicitly like onclientClick
非常适用于回传并将其放置在母版页中，适用于所有按钮而无需隐式调用 onclientClick
回答by blasteralfred Ψ
you can use this.
你可以用这个。
<script>
function hideme()
{
$("#buttonImage").hide();
}
</script>
<a id="buttonId" href="next-page.html" onclick="return hideme()"><img id="buttonImage" src="image1.jpg"></a>
if you don't want to hide image please use this..
如果您不想隐藏图像，请使用此..
$('#buttonImage').click(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
That will prevent the default behaviour of a hyperlink, which is to visit the specified href.
这将阻止超链接的默认行为，即访问指定的 href。
回答by blobmaster
Let's make a jquery plugin :
让我们制作一个 jquery 插件：
$.fn.onlyoneclick=function(o){
var options=$.extend({src:"#"},o);
$(this).click(function(evt){
var $elf=$(this);
if( $elf.data("submitted") ){
evt.preventDefault();
return false;
}
$elf.attr("src", typeof(options.src) == 'function' ?
options.src($elf.attr("src"))
: options.src
).data("submitted",true);
});
}
$(".onlyoneclick").onlyoneclick({
src : function( src ){
return src.replace("gold","red");
}
})
on any button that should trigger only once :
在任何应该只触发一次的按钮上：
<button ... class="onlyoneclick">tatatata... </button>
回答by Anuja
its simple...just one line of code :)
它很简单……只有一行代码:)
Onclick return false.
