無法在Mouseup事件中傳遞迴調函數 - JavaScript

Question

我試圖將一個回調函數作爲前一個由Chrome擴展中的mouseup觸發的函數中的參數傳遞。所以基本上我打算在lwsGetText完成運行後立即觸發quickTranslate函數。但我不知道如何做到這一點，因爲函數lwsGetText是由mouseup觸發的。這裏是我的代碼：

內容腳本（JS）

(function() { 

    // Holds text being selected in browser 
    var lwsSelectedText = ''; 

    // Adds pop-up to current webpage 
    function lwsAddContent(callback) { 

     // Get body tag 
     var body = document.getElementsByTagName('body'); 

     // add invisible div 
     document.body.innerHTML += '<div id="myModal" class="modal"><div class="modal-content"><span class="close">&times;</span><div id="lwsSpanishDiv"><p id="lwsSpanishTitle">Spanish</p><textarea id="lwsSpanishTextArea">Hello</textarea></div><div id="lwsEnglishDiv"><p id="lwsEnglishTitle">English</p><textarea id="lwsEnglishTextArea">Hello 2</textarea></div></div></div>'; 

     callback(lwsSetUpTextGetter); 

    } 

    // Make the pop-up visible and set up close button 
    function lwsActivateContent(callback) { 

     var modal = document.getElementById('myModal'); 

     // Get the textarea 
     var txtarea = document.getElementById("myTxtArea"); 

     // Get the <span> element that closes the modal 
     var span = document.getElementsByClassName("close")[0]; 

     span.onclick = function() { 
      modal.style.display = "none"; 
     } 

     callback(quickTranslate); 

    } 

    // Initialize ability to select and grab text from browser 
    function lwsSetUpTextGetter(callback) { 
     //Set the onmouseup function to lwsGetText 
     document.onmouseup = lwsGetText; 
     //Handling clicking outside webpage? 
     if (!document.all) document.captureEvents(Event.MOUSEUP); 


    } 

    //Gets selected text 
    function lwsGetText(callback,e) { 

     // Get access to spanish text area 
     var spanishText = document.getElementById('lwsSpanishTextArea'); 

     //Get text 
     lwsSelectedText = (document.all) ? document.selection.createRange().text : document.getSelection(); 

     //if nothing is selected, do nothing 
     if (lwsSelectedText != '') { 

      // test: does browser grab text correctly? 
      alert(lwsSelectedText); 

      // Set spanish text area content to the selected text from browser 
      spanishText.value = lwsSelectedText; 

      // --Error Here-- 
      callback(); 

     } 

    } 

    function quickTranslate() { 

     alert("Quick Translate"); 

     var url = "https://translate.yandex.net/api/v1.5/tr.json/translate", 
     keyAPI = "trnsl.1.1.20130922T110455Z.4a9208e68c61a760.f819c1db302ba637c2bea1befa4db9f784e9fbb8"; 

     var englishTextArea = document.getElementById('lwsEnglishTextArea'); 
     var spanishTextArea = document.getElementById('lwsSpanishTextArea'); 

     englishTextArea.value = 'Working...'; 

     var xhr = new XMLHttpRequest(), 
      textAPI = spanishTextArea.value, 
      langAPI = 'en'; 
     data = "key=" + keyAPI + "&text=" + textAPI + "&lang=" + langAPI; 
     xhr.open("POST", url, true); 
     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     xhr.send(data); 
     xhr.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       var res = this.responseText; 
       var json = JSON.parse(res); 
       if (json.code == 200) { 
        englishTextArea.value = json.text[0]; 
       } 
       else { 
        englishTextArea.value = "Error Code: " + json.code; 
       } 
      } 
     } 

    } 


    // When document ready 
    $(document).ready(function() { 

     lwsAddContent(lwsActivateContent); 

    }); 

})(); 

如果有人可以幫助我弄清楚如何實現quickTranslate功能作爲一個回調函數，這將是真棒！謝謝！

Answer 1

如您所知，您分配的事件處理函數只接受一個參數，即事件。然而，你可以創建一個周圍封閉的通過執行類似「回調」變量：

function lwsGetText(callback) { 
    return function (e) { 

    // Get access to spanish text area 
    var spanishText = document.getElementById('lwsSpanishTextArea'); 

    //Get text 
    lwsSelectedText = (document.all) ? document.selection.createRange().text : document.getSelection(); 

    //if nothing is selected, do nothing 
    if (lwsSelectedText != '') { 

     // test: does browser grab text correctly? 
     alert(lwsSelectedText); 

     // Set spanish text area content to the selected text from browser 
     spanishText.value = lwsSelectedText; 

     // --Error Here-- 
     callback(); 

    } 
    }; 
} 

這樣，你會傳遞值quickTranslate的「回調」參數，當你設置的處理程序，不知道你是怎麼做的那麼這裏是猜測：

myElement.addEventListener("mouseup", lwsGetText(quickTranslate));