如何防止onclick事件多次發射？

這是情況，我之前已經詢問過這個情況，但是我仍然沒有按照我的意願去做這件事。如何防止onclick事件多次發射？

我有一個複雜的功能附加到一個點擊事件，使AJAX調用，然後在模態對話框中顯示該信息。

雖然我的示例使用jQuery手機，但我需要通過本地JavaScript工作，因爲我的手機都使用jQuery手機和桌面，而不使用任何jQuery。這不是我想要的，但它也超出了我的控制範圍。

所以，你可以看到我的例子在這個JSFiddle對於這個例子，我只是使用超時來模擬我遇到的問題。如果您多次單擊該鏈接，它將不止一次觸發該事件。我需要防止這種行爲。我試過event.preventdefault並刪除eventlistener和其他一些東西，但我似乎無法重新連接onclick甚至。所以，一旦對話框關閉，用戶無法重新使用該鏈接，如果他們選擇。我想嘗試將這些全部封裝到一個函數中，因爲如果可能的話，這個對話框將被渲染。

我正在尋找一個簡單而優雅的解決方案，而且我很難爲此問題提出一個很好的解決方案。

任何人都可以提供一些解決方案嗎？

來源

2013-05-29 fskirschbaum

難道你不能添加像var modalDialogRequestInFlight這樣的標誌。這默認爲false，但啓動時設置爲true，並且在模態對話框顯示時翻轉爲false？如果對話框無法顯示，您還需要清除標誌。這個標誌將在「點擊」處理程序上進行檢查，以防止重複的請求，如果一個已經在飛行中。 – veritasetratio

是的，我實際上也嘗試過這樣的事情，但是有幾個模式可以使用。然而，在閱讀完本書和Arun P Johny的建議之後，我想我可能會知道如何使這項工作適合我的需求。感謝您的評論。 – fskirschbaum

您可以使用標誌來控制點擊行爲

防爆

var inProgress = false; 
function showDialog() { 
    inProgress = false; 
    $.mobile.changePage("#dialog", {transition:"pop"}); 
} 

function callDialog() { 
    if(inProgress){ 
     return; 
    } 
    inProgress = true; 
    setTimeout(showDialog, 1000); 
}

德mo：Fiddle

來源

2013-05-29 03:12:23

我曾嘗試過這樣的事情，但有幾個對話框正在處理中，所以它看起來像是一種非常乏味的方法，但考慮到它後還有一些，我認爲我有一種方法可以完成我之前沒有考慮過的工作。謝謝。 – fskirschbaum

更新你的小提琴，基本上只是刪除onclick處理程序，一旦它被點擊，然後將其添加回它完成後

function callDialog() { 
    console.log("been clicked"); 
    var anchor = document.getElementById("dosomethinganchor");   
    anchor.onclick = null;  // remove onclick function 
    setTimeout(function() { 
     anchor.onclick = callDialog; // got response back, make sure we add onclick back 
     showDialog(); 
    }, 1000); 
}

http://jsfiddle.net/rvuZ6/8/

來源

2013-05-29 02:44:19

感謝您的建議，不幸的是您的小提琴實際上仍然展現出我所描述的行爲。如果您連續多次單擊該鏈接，然後關閉第一個彈出窗口，則會顯示另一個彈出窗口。我嘗試了一些從元素中刪除onclick的方法，但由於我不會在這裏介紹的原因，我無法以優雅的方式恢復功能。不過謝謝你的回答。 – fskirschbaum

http://jsfiddle.net/rvuZ6/8/我錯誤地認爲「this」引用了錨元素。你必須通過id顯式查找鏈接來獲得onclick方法。比跟蹤另一個變量的按鈕動作所處的狀態要少。 –

如何防止onclick事件多次發射？

回答

相關問題