2

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

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

4

8 回答 8

2 
<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>
于 2012-09-07T02:40:04.773 回答
0

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

<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';
};
于 2012-09-07T00:04:24.593 回答
0

单击时，从元素中删除href属性。a

于 2012-09-07T02:29:59.070 回答
0

这是一个非常简单的

在你的 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 毫秒后启用

非常适合回发 n 将其放在母版页中，适用于所有按钮，而无需像这样隐式调用onclientClick

于 2012-09-07T03:28:34.323 回答
0

你可以用这个。

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

于 2012-09-07T05:49:35.443 回答
0

我最终选择了以下内容：

$(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();
    }
  });
});
于 2012-09-07T06:07:00.903 回答
-1

让我们制作一个 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>
于 2012-09-09T18:53:24.623 回答
-2

它很简单......只有一行代码:)

Onclick return false.

于 2014-06-13T10:49:45.120 回答