removeEventListner事件已被觸發

我有一個腳本，添加一個單擊事件到一個div添加一個新的元素。然後該函數創建並添加該元素，然後應該從Div中刪除點擊，因此不會添加更遠的元素。我明白爲什麼removeEventListener不工作，但我不知道如何解決它。下面是代碼，給我的問題行：removeEventListner事件已被觸發

function enable_add(tag, type){return function(e){add_element(e, tag, type);};} //Function call for adding new elements 
document.getElementById("body_visual_editor").addEventListener("click", enable_add(tag, type)); 
document.getElementById("body_visual_editor").removeEventListener("click", enable_add());

消防錯誤說功能（五）被指定爲事件，不enable_add，所以remove事件沒有找到合適的事件。我如何編寫這三行，以便它們都能正常工作？
請不要javascript庫。

更新：所以我就重寫它像這樣sovled的一部開拓創新isue：

var handler; 
function enable_add(tag, type) //Function call for adding new elements 
{ 
    handler= function handler(e){add_element(e, tag, type);}; 
    return handler 
} 
document.getElementById("body_visual_editor").addEventListener("click", enable_add(tag, type)); 
document.getElementById("body_visual_editor").removeEventListener("click", handler);

但現在它ETTING的處理程序創建的add_element呼叫的要素，以及一個上點擊。我如何解決這個問題？

來源

2015-10-23 Zaper127

編輯，更新

嘗試命名匿名函數，利用Function.prototype.call()，Function.prototype.bind()，arguments，通過this，event對象

var namedHandler; 
 

 
function enable_add(tag, type) { 
 
    namedHandler = function namedHandler() { 
 
    add_element.call(this, arguments[arguments.length - 1], tag, type) 
 
    }.bind(this, tag, type); 
 
    return namedHandler 
 
} 
 

 
function add_element(e, tag, type) { 
 
    var el = document.createElement(tag); 
 
    el.setAttribute("type", type); 
 
    document.body.appendChild(el); 
 
    this.removeEventListener("click", namedHandler) 
 
} 
 

 
var elem = document.getElementById("body_visusal_editor"); 
 
elem.addEventListener("click", enable_add.call(elem, "input", "text"))

<div id="body_visusal_editor">click to add one element</div>

的jsfiddle http://jsfiddle.net/oe71yfn8/

來源

2015-10-23 02:55:14 guest271314

enable_edd應該返回偵聽器函數。這個答案解決了這個問題。謝謝。 – Zaper127

說得太快。現在我有另一個問題。當我嘗試設置處理程序變量時，它運行add_element（）並創建一個空元素，然後點擊它創建第二個元素。我如何阻止？我將編輯我的答案以顯示我的更改。 – Zaper127

@ Zaper127可以創建jsfiddle http://jsfiddle.net來演示嗎？ – guest271314

再次調用函數將創建一個新函數，所以這將不起作用。您必須將EventListener作爲變量存儲以便將其傳遞給removeEventListener。

來源

2015-10-23 02:57:43 vpzomtrrfrt

這裏的問題：

你有一個部分應用功能，那你直接突入addEventListener。

removeEventListener僅適用於與傳遞給addEventListener的函數完全相同的功能實例。

function makeFunction() { 
    return function() { }; 
} 

var func1 = makeFunction(); 
var func2 = makeFunction(); 

func1 === func2; // false

所以你的解決方案是將緩存中創建功能作爲參照，你再通入的addEventListener，記住它，並把它傳遞到removeEventListener。

var myHandler = makeFunction(); 
el.addEventListener("click", myHandler); 
el.removeEventListener("click", myHandler);

...當然，您可能不打算立即刪除它。這意味着你需要獲得更多的創意。

function handleEventOnce (evt, el, action) { 
    function doSomething (e) { 
    action(e); 
    el.removeEventListener(evt, doSomething); 
    } 
    el.addEventListener(evt, doSomething); 
} 

handleEventOnce("click", button, somePartialFunction(a, b));

來源

2015-10-23 03:08:34 Norguard

removeEventListner事件已被觸發

回答

相關問題