Bật/Tắt sự kiện của các phần tử DOM với JS/jQuery

Question

Tôi kẹt ở đây với một vấn đề nhỏ mà tôi đã đặt khá nhiều thời gian trong đó là khá xấu so với chức năng của nó.

Tôi có thẻ trong DOM của tôi, và tôi đã được ràng buộc một số sự kiện đối với họ với jQuery ..

var a = $('<a>').click(data, function() { ... }) 

Đôi khi tôi muốn vô hiệu hóa một số những yếu tố này, có nghĩa là tôi thêm một CSS-Class 'bị vô hiệu hoá' đối với nó và tôi muốn xóa tất cả các sự kiện, do đó không có sự kiện nào được kích hoạt nữa. Tôi đã tạo ra một lớp học ở đây được gọi là "nút" để giải quyết mà

var button = new Button(a) 
button.disable() 

tôi có thể loại bỏ tất cả các sự kiện từ một đối tượng jQuery với $ .unbind. Nhưng tôi cũng muốn có các tính năng đối diện

button.enable() 

mà liên kết với tất cả các sự kiện với tất cả các bộ xử lý trở lại các yếu tố HOẶC có lẽ đó là một tính năng trong jQuery mà thực sự nows làm thế nào để làm điều đó ?!

Nút Lớp tôi trông giống tương tự như sau:

Button = function(obj) { 
    this.element = obj 
    this.events = null 

    this.enable = function() { 
    this.element.removeClass('disabled') 
    obj.data('events', this.events) 
    return this 
    } 

    this.disable = function() { 
    this.element.addClass('disabled') 
    this.events = obj.data('events') 
    return this 
    } 
} 

Bất kỳ ý tưởng? Đặc biệt là chức năng rebind này phải có sẵn sau khi vô hiệu hóa -> enable

var a = $('<a>').click(data, function() { ... }) 

tôi tìm thấy những nguồn mà không làm việc cho tôi: http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html

http://forum.jquery.com/topic/jquery-temporarily-disabling-events -> Tôi không thiết lập các sự kiện trong lớp nút

Đánh giá cao sự trợ giúp của bạn.

Answer 1

Bạn có thể sử dụng <input type="button"> và sau đó sử dụng $("#buttonID").addAttr('disabled', 'disabled'); và $("#buttonID").removeAttr('disabled');. Việc tắt và bật sẽ được trình duyệt xử lý. Bạn vẫn có thể chỉnh sửa nó để trông giống như một cái neo, nếu bạn cần điều đó, bằng cách loại bỏ hình nền và viền cho nút. Tuy nhiên, hãy lưu ý rằng một số lề và đệm có thể vẫn làm hỏng u trong một số trình duyệt.

Answer 2

tôi sẽ đi về vấn đề này với cách tiếp cận khác nhau:

<a id="link1">Test function</a> 
<a id="link2">Disable/enable function</a> 

<script type="text/javascript"> 
    $(function() { 
     // this needs to be placed before function you want to control with disabled flag 
     $("#link1").click(function(event) { 
      console.log("Fired event 1"); 
      if ($(this).hasClass('disabled')) { 
       event.stopImmediatePropagation(); 
      } 
     }); 

     $("#link1").click(function() { 
      console.log("Fired event 2"); 
     }); 

     $("#link2").click(function() { 
      $("#link1").toggleClass("disabled"); 
     }); 
    }); 
</script> 

này có thể không những gì bạn yêu cầu, vì nó có thể ảnh hưởng cũng có chức năng khác binded vào sự kiện này sau đó. Cách thay thế có thể là sửa đổi các hàm chính nó thành giống như:

$("#link1").click(function(event) { 
    console.log("Fired event 1"); 
    if ($(this).hasClass('disabled')) { 
     return; 
    } 

    // do something here 
}); 

nếu đó là một tùy chọn.

Answer 3

$("a").click(function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    return false; 
}); 

Trả về sai là rất quan trọng.

Hoặc bạn có thể viết riêng cho phép và vô hiệu hóa chức năng của bạn mà làm điều gì đó như:

function enable(element, event, eventHandler) { 
    if(element.data()[event].eventHandler && !eventHandler) { //this is pseudo code to check for null and undefined, you should also perform type checking 
     element.bind(event, element.data()[event]); 

    } 
    else (!element.data()[event] && eventHandler) { 
     element.bind(event, element.data()[event]); 
     element.data({event: eventHandler}); //We save the event handler for future enable() calls 
    } 
} 

function disable(element, event) { 
    element.unbind().die(); 
} 

Đây không phải là mã hoàn hảo, nhưng tôi chắc chắn bạn sẽ có được ý tưởng cơ bản. Khôi phục trình xử lý sự kiện cũ từ dữ liệu DOM phần tử khi bật tính năng gọi.Nhược điểm là bạn sẽ phải sử dụng enable() để thêm bất kỳ trình nghe sự kiện nào có thể cần phải vô hiệu hóa() d. Nếu không, trình xử lý sự kiện sẽ không được lưu trong dữ liệu DOM và không thể được khôi phục bằng bật() một lần nữa. Hiện tại, không có cách nào dễ dàng để có được danh sách tất cả người nghe sự kiện trên một yếu tố; điều này sẽ làm cho công việc dễ dàng hơn nhiều.

Answer 4

Thay vì thêm trình xử lý sự kiện vào từng phần tử riêng biệt, bạn nên sử dụng ủy quyền sự kiện. Nó sẽ làm cho cấu trúc dễ quản lý hơn nhiều.

• http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
• http://cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders
• http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

này tại sao bạn chỉ có thể kiểm tra các lớp (es) trên yếu tố nhấn vào, và hành động phù hợp. Và bạn sẽ có thể thu hồi lại chúng, hãy thay đổi các lớp của một từ khóa.

P.S. đọc các liên kết một cách cẩn thận, để bạn có thể giải thích nó cho người khác sau này. Sự kiện phái đoàn là một kỹ thuật rất quan trọng.