prevent double-click

最新推荐文章于 2023-06-21 22:49:03 发布

原创最新推荐文章于 2023-06-21 22:49:03 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

WEB前端专栏收录该内容

9 篇文章

订阅专栏

本文探讨了在不同版本的Rails框架中禁用按钮的方法，包括使用:disable_with选项及JavaScript解决方案，并介绍了如何防止链接被重复点击，特别是针对不支持CSS 'pointer-events'属性的Internet Explorer浏览器。

First we talk about the button.
Button or Submit
Solution 1: disable_with => "Begin Service"
Rails can use :disable_with => "Begin Service".
Example:

= button_tag "Begin Service", root_path, :disable_with => "Begin Service"

This will not work when use RailsVersion Under(maybe 3.2) for image_submit_button.
So we can fix it like this:
Solution 2:

$("#an_image_submit").attr("disabled", true)

Link Add class = 'nodouble' to a link
Solution 1:

$(".nodouble").live "click", -> 
  $(this).click -> return false

Solution 2:

$("body").on "click", ".nodouble", (e) -> 
  $(this).attr "onclick", "" 
  $(this).on "click", (e) -> false

Solution 3: For Ajax query: CSS:
#'pointer-events: none' will not work in IE, So this solution is not suitable for IE. This solution's benifit is that it will change the CSS of the clicked link.

a.disabled { opacity: 0.5; pointer-events: none; cursor: default }

$(".nodouble").livequery "click", (e) -> 
  e.preventDefault() 
  a = $(this) a.addClass('disabled')

Because Solution 3 can not work with IE, So we should do more work like this: Solutions 4

$(".nodouble").livequery "click", (e) -> 
  e.preventDefault() 
  a = $(this) return false if a.data("clicked") a.data("clicked", true) 
  a.addClass('disabled')