使用JS/jQuery啓用/禁用DOM元素的事件

Question

我在這裏遇到了一些小問題，我把很多時間放在了與其功能相比相當差的地方。

我有標籤在我的DOM，我已經結合幾個事件對他們使用jQuery ..

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

有時候我想禁用某些元素，這意味着我添加CSS-類'禁用'它，我想刪除所有事件，所以不再有任何事件觸發。我創建了一個這裏所說的「按鈕」類來解決

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

我可以刪除一個jQuery對象中的所有事件以$ .unbind。但我也想有相反的特徵

button.enable() 

結合所有處理回元素 或 也許有jQuery的一項功能，實際上NOW的如何做到這一點的所有事件？

我的按鈕類類似於這樣的東西：

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

任何想法？特別是今年重新綁定功能必須是後禁止使用 - >啓用

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

我發現這些來源並沒有爲我工作： http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html

http://forum.jquery.com/topic/jquery-temporarily-disabling-events - >我不是設置按鈕類中的事件

感謝您的幫助。

Answer 1

您可以使用<input type="button">，然後使用$("#buttonID").addAttr('disabled', 'disabled');和$("#buttonID").removeAttr('disabled');。禁用和啓用將由瀏覽器處理。您仍然可以將其重新設置爲看起來像錨點，如果需要，可以通過移除按鈕的背景和邊框。但請注意，在某些瀏覽器中，某些邊距和填充可能仍會妨礙你。

Answer 2

我會走在這條以不同的方法：

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

這可能不是您所需要的，因爲它可能影響也將綁定此事件後來等功能。替代可以是修改的功能本身更像：

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

    // do something here 
}); 

，如果這是一個選項。

Answer 3

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

返回錯誤是非常重要的。

或者你可以寫這樣做你自己的啓用和禁用功能：

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

這是不完美的代碼，但我敢肯定，你得到的基本思路。調用啓用時從元素DOM數據中恢復舊的事件處理程序。缺點是你必須使用enable（）來添加任何可能需要disable（）d的事件監聽器。否則事件處理程序將不會保存在DOM數據中，並且無法再次使用enable（）進行恢復。目前，沒有萬無一失的方法來獲取元素上所有事件偵聽器的列表;這會使工作變得更容易。

Answer 4

而是分別添加事件處理程序的每個元素的，你應該使用事件委託。它會變得更可管理的結構。

• 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

這爲什麼你可以只檢查點擊元素類（ES），並採取相應的行動。你甚至可以通過改變標籤的類來重新排列它們。

P.S.仔細閱讀鏈接，以便以後可以向其他人解釋。事件代表團是一項非常重要的技術。