Question

我有一个脚本，它将一个click事件添加到div以添加一个新元素。然后该函数创建并添加元素，然后应该从Div中移除单击，因此不能添加更远的元素。我理解为什么removeEventListener不起作用，但我不知道如何解决它。以下是给我问题的代码行：

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);

Fire bug表示函数（e）被指定为事件，而不是enable_add，因此remove事件找不到正确的事件。我怎么写这三行所以它们都正常工作？
请不要使用JavaScript库。

更新：所以我通过重写这样的方式得到了原始的信号：

{{1}}

但是现在它在add_element调用上创建了一个元素，用于编写处理程序，并且单击一个元素。我该如何解决这个问题？

Answer 1

问题在于：

您已获得部分应用功能，您已直接进入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));

Answer 2

修改，更新

尝试使用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/

Answer 3

再次调用该函数将创建一个新函数，因此无法正常工作。您必须将EventListener存储为变量才能将其传递给removeEventListener。

触发事件后removeEventListner

3 个答案: