Question

我有一个链接到页面的图像。这是一个过程按钮，最多可能需要20秒才能运行。我想阻止用户多次推送它。

如何编写一个Javascript，当按下按钮时，它会跟随超链接，但是按钮的链接会被禁用，图像会改变吗？

Answer 1

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

Answer 2

从您的问题来看，听起来您的“按钮”是您点击的图片......如果这是真的，那么您可以使用以下内容：

<a id="my_link" href="/page_to_vist_onclick"><img id="my_image"></a>

然后你的javascript将是：

document.getElementById('my_link').onclick = function() {
  document.getElementById('my_link').disabled = true;
  document.getElementById("my_image").src='the_path_to_another_image';
};

Answer 3

点击后，从href元素中删除a属性。

Answer 4

这对你来说非常简单

你的JS中的

function Create(){ 
document.write('<INPUT disabled TYPE="button" value="Click Me!">'); 
}

HTML中的

<INPUT TYPE="button" value="Click Me!" onclick="Create()">

如果您准备使用jQuery，那么这是另一种解决方案。

$("selectorbyclassorbyIDorbyName").click(function () {
  $("selectorbyclassorbyIDorbyName").attr("disabled", true).delay(2000).attr("disabled", false);
});

选择按钮及其ID或文本或类...它只是在第一次点击后禁用，并在20 Milli秒后启用

非常适合发布帖子并将其放置在母版页面中，适用于所有按钮而不会隐式调用onclientClick

Answer 5

你可以使用它。

<script>
function hideme()
{
    $("#buttonImage").hide();
}
</script>

<a id="buttonId" href="next-page.html" onclick="return hideme()"><img id="buttonImage" src="image1.jpg"></a>

如果您不想隐藏图片，请使用此..

$('#buttonImage').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

这将阻止超链接的默认行为，即访问指定的href。

Answer 6

我最终选择了以下内容：

$(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();
    }
  });
});

Answer 7

让我们制作一个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");
      }
    })

在任何只应触发一次的按钮上：

    <button ... class="onlyoneclick">tatatata... </button>

Answer 8

简单......只需一行代码:)

Onclick return false.

单击时禁用图像链接

8 个答案: