jQuery：使用 off() 禁用 onclick 事件不起作用

Question

這是我正在嘗試做的一個簡單示例，我有 HTML 代碼，我的目標是禁用三個超鏈接#validate 、 #organize和#export ：

<p id="menuitems" class="inline textcenter">
                        <a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >> 
                        <a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >> 
                        <a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >> 
                        <a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a>
                    </p>

當我嘗試調用以下內容時，什么也沒發生。 我正在使用 jQuery 1.11.4 並且我讀到禁用事件偵聽器的方法自 1.7 以來發生了變化。 所以我想知道我下面的 JavaScript 代碼是否有錯誤或一些新的變化：

$('#validate').off('click');
$('#organize').off('click');
$('#export').off('click');

Answer 1

一種方法是暫時將 onclick 設置為 null，但將原始元素 onclick 存儲在元素或 jquery 對象（例如data ）中。 使用輔助函數，您可以打開或關閉元素：

function setEnabled($a, Enabled ){
    $a.each(function(i, a){          
        var en = a.onclick !== null;        
        if(en == Enabled)return;
        if(Enabled){
            a.onclick = $(a).data('orgClick');            
        }
        else
        {
            $(a).data('orgClick',a.onclick);
            a.onclick = null;
        }
    });
}

可以使用以下內容調用：

setEnabled($('#validate'), false); 

（由於每個元素，也適用於具有多個元素的 jquery 對象）

示例小提琴

Answer 2

您需要按如下方式解除單擊事件（已聲明為內聯）的綁定。

 document.getElementById("import").onclick = null; document.getElementById("validate").onclick = null; document.getElementById("organize").onclick = null;

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p id="menuitems" class="inline textcenter"> <a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >> <a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >> <a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >> <a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a> </p>

Answer 3

jquery無法識別通過javascript附加的事件，因此javascript和jquery混合方法無法正常工作-這就是jquery .off('click');的原因。 不分離點擊事件。

修改html：

  <p id="menuitems" class="inline textcenter">
        <a id="import" href="javascript:void(0);">IMPORT</a> >>
        <a id="validate" href="javascript:void(0);">VALIDATE</a> >>
        <a id="organize" href="javascript:void(0);">ORGANIZE</a> >>
        <a id="export" href="javascript:void(0);">EXPORT</a>
    </p>

使用 jquery 附加點擊事件：

 $(document).ready(function () {
          $('#import').on("click", function () {
                switchScreen('Import');
            });
            $('#validate').on("click", function () {
                switchScreen('Validate');
            });
            $('#organize').on("click", function () {
                switchScreen('Organize');
            });
            $('#export').on("click", function () {
                switchScreen('Export');
            });
});

需要時禁用點擊事件：

 $('#import').off('click');
 $('#validate').off('click');
 $('#organize').off('click');
 $('#export').off('click');

上述方法適用於所有標准瀏覽器，但僅適用於 IE，我們可以采用另一種方法：

  $('#validate').attr("disabled", "disabled");
  $('#organize').attr("disabled", "disabled");
  $('#export').attr("disabled", "disabled");

Answer 4

您可以讓 jQuery 接管您的內聯事件，以便您稍后可以off()它。 請注意， off()確實刪除了偵聽器。 您不能真正禁用它，除非您在處理程序本身中放置一些邏輯以在它不應該運行時退出。

 function switchScreen(screenName) { console.log(screenName); }; $(function() { $('#menuitems a').each(function() { var oldClick = this.onclick; $(this).on('click', $.proxy(oldClick, this)); this.onclick = null; }); $('#import').off('click'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="menuitems" class="inline textcenter"> <a id="import" href="javascript:void(0);" onclick="switchScreen('Import');">IMPORT</a> >> <a id="validate" href="javascript:void(0);" onclick="switchScreen('Validate');">VALIDATE</a> >> <a id="organize" href="javascript:void(0);" onclick="switchScreen('Organize');">ORGANIZE</a> >> <a id="export" href="javascript:void(0);" onclick="switchScreen('Export');">EXPORT</a> </p>

Answer 5

嘗試取消綁定而不是關閉，因為點擊事件是內聯定義的，如果點擊是使用 on 附加的，那么它將與關閉一起工作。