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呼叫的要素，以及一个上点击。我如何解决这个问题？

答

编辑，更新

尝试命名匿名函数，利用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/

enable_edd应该返回侦听器函数。这个答案解决了这个问题。谢谢。 – Zaper127

说得太快。现在我有另一个问题。当我尝试设置处理程序变量时，它运行add_element（）并创建一个空元素，然后点击它创建第二个元素。我如何阻止？我将编辑我的答案以显示我的更改。 – Zaper127

@ Zaper127可以创建jsfiddle http://jsfiddle.net来演示吗？ – guest271314

答

再次调用函数将创建一个新函数，所以这将不起作用。您必须将EventListener作为变量存储以便将其传递给removeEventListener。

答

这里的问题：

你有一个部分应用功能，那你直接突入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));

removeEventListner事件已被触发

相关推荐