Làm cách nào để tạm thời vô hiệu hóa các sự kiện nhấp chuột trên một nút mà không thực sự vô hiệu hóa nó?

Question

Sử dụng jQuery, tôi muốn, mà không thay đổi thuộc tính disabled của một nút nhất định, vô hiệu hóa tất cả các sự kiện nhấp chuột cho nó.

Tôi đã nghĩ đến việc truy xuất trình xử lý sự kiện nhấp chuột, hủy liên kết chúng và lưu trữ chúng (ví dụ: sử dụng data()).

Sau đó, tôi có thể liên kết lại chúng khi nút được bật lại.

Answer 1

Không khó để làm từ jQuery đã lưu trữ tất cả các trình xử lý sự kiện của nó là data() trên chính phần tử đó. Bạn có thể nhận (và sửa đổi) đối tượng này thông qua .data().events.

Hãy thử$("#portalLink a").data().events.click = nulltrong giao diện điều khiển của bạn ngay bây giờ để tắt tùy chọn "StackExchange" thả xuống phía trên bên trái của trang này.

Bây giờ bạn có thể dễ dàng lưu một tham chiếu đến bộ xử lý với:

events._click = events.click; 
events.click = null; 

Và sau đó khôi phục chúng bằng cách sử dụng:

events.click = events._click; 
events._click = null; 

Lưu ý rằng điều này sẽ không vô hiệu hóa những sự kiện đang bị ràng buộc qua .delegate() hoặc .live(), khi chúng hoạt động bằng sự kiện sủi bọt/tuyên truyền. Để vô hiệu hóa những người là tốt, chỉ cần gắn một handler mới mà khối tuyên truyền đến các yếu tố tổ tiên:

events._click = events.click; 
events.click = null; 
// Block .live() and .delegate() 
$("#el").click(function (e) { 
    e.stopPropagation(); 
}); 

Bạn thậm chí không cần phải unbind chức năng chặn này khi đó là thời gian để cho phép xử lý một lần nữa, vì events.click = events._click sẽ ghi đè lên chức năng bạn chỉ bị ràng buộc với tất cả các trình xử lý cũ.

Answer 2

Đó là cách để thực hiện. Nếu bạn đã onclick quy định như một thuộc tính bạn có thể chuyển đổi các thuộc tính busing

$(button_element).attr('click', ''); 

và

$(button_element).attr('click', 'do_the_regular_action()'); 

Answer 3

Bạn có thể sử dụng unbind và bind

$('#control').unbind('click');

và

$('#control').bind('click', NameOfFunctionToCall);

Answer 4

đây vẫn chưa một cách khác:

$("#myButton").click(function() { 
    if ($(this).attr("temp_disable") == "disabled") { 
     //nothing to do, temporarily disabled... 
    } 
    else { 
     alert("You clicked me!"); 
    } 
}); 

Để "vô hiệu hóa" nó trong 10 giây:

$("#myButton").attr("temp_disable", "disabled"); 
window.setTimeout(function() { $("#myButton").attr("temp_disable", ""); }, 10000); 

test Live: http://jsfiddle.net/yahavbr/ByM6h/

Answer 5

tôi sẽ mở rộng về câu trả lời (s) được cung cấp bởi Barry và Thariama ... mà tôi nghĩ sẽ làm hài lòng đối Ovesh của:

Bạn có thể thêm một không gian tên cho sự kiện của bạn ràng buộc.Điều đó cho phép bạn tham khảo sự kiện cụ thể đó ràng buộc sau, mà không va chạm với các ràng buộc khác. Tôi nghĩ rằng điều này là sạch hơn so với câu trả lời được chấp nhận ... (Để công bằng, điều này có thể không có sẵn trong jQuery tại thời điểm câu hỏi ban đầu).

// A generic click handler: 
$('.myButton').click(function() { ... }); 

// A namespaced click handler: 
$('.myButton').bind('click.someSituation', function() { ... }); 

// Later you can unbind only the handler you want by using the namespace: 
$('.myButton').unbind('click.someSituation'); 

// The default click handler still works. 

Answer 6

Thay vì thực hiện việc này Sử dụng Javascript chính để thực hiện tác vụ này ví dụ: Hãy xem ví dụ sau.

function MakeSaveDisabled(flg) { 
    if (flg != null) { 
     $(".btnpost").each(function() { 
      this.removeAttribute("disabled"); 
      if (this.hasAttribute("oclickevt")) { 
       this.setAttribute("onclick", this.getAttribute("oclickevt")); 
      } 
     }); 
    } 
    else { 
     $(".btnpost").each(function() { 
      this.setAttribute("disabled", "true"); 
      if (this.getAttribute("onclick") != null) { 
       this.setAttribute("oclickevt", this.getAttribute("onclick")); 
      } 
      this.removeAttribute("onclick"); 
     }); 
    } 
} 

Lưu hàm javascript vào một số thuộc tính tạm thời và ràng buộc nó khi bạn yêu cầu.

Answer 7

Tất cả các câu trả lời ở đây bây giờ đang lỗi thời - như jQuery 1,7 bạn nên sử dụng .off() như được giải thích on the official jQuery site

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>off demo</title> 
 
    <style> 
 
    button { 
 
    margin: 5px; 
 
    } 
 
    button#theone { 
 
    color: red; 
 
    background: yellow; 
 
    } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
</head> 
 
<body> 
 
    
 
<button id="theone">Does nothing...</button> 
 
<button id="bind">Add Click</button> 
 
<button id="unbind">Remove Click</button> 
 
<div style="display:none;">Click!</div> 
 
    
 
<script> 
 
function flash() { 
 
    $("div").show().fadeOut("slow"); 
 
} 
 
$("#bind").click(function() { 
 
    $("body") 
 
    .on("click", "#theone", flash) 
 
    .find("#theone") 
 
     .text("Can Click!"); 
 
}); 
 
$("#unbind").click(function() { 
 
    $("body") 
 
    .off("click", "#theone", flash) 
 
    .find("#theone") 
 
     .text("Does nothing..."); 
 
}); 
 
</script> 
 
    
 
</body> 
 
</html>