TESTbuffer.php

Question

我用最少量的代码重新创建了我的问题Lol

基本上，我有一个使用addEventListener的iFrame，使用用户通过表单发布的数据。它运行良好，直到用户再次发布，然后存在2个EventListeners。我尝试过使用removeEventListener，但在这种情况下这不起作用。

以下是我为重现问题所做的工作：

TESTbuffer.php

<HTML>
<HEAD>
<script>
function startListener() {
    parent.document.removeEventListener('mouseup',outputInput,false);
    parent.document.addEventListener('mouseup',outputInput,false);
}
function outputInput() {
    console.log('<?php echo $_POST['input']; ?>');
}
</script>
</HEAD>
<BODY onload='startListener()'>
</BODY>
</HTML>

TESTparent.php

<iframe name="bufferiframe" id="bufferiframe"></iframe>
<form name="Test" method="POST" action="TESTbuffer.php" target="bufferiframe">
    <input type="text" name="input">
    <input type="submit" value="Go">
</form>

如果您按照以下步骤操作会发生什么：

输入＆＃39;你好＆＃39;然后点击“Go＆＃39;
点击屏幕上的任意位置，然后＆＃39;你好＆＃39;出现在控制台中。
输入＆＃39; bye＆＃39;然后点击“Go＆＃39;
点击屏幕上的任意位置，然后＆＃39;你好＆＃39;和＆＃39; bye＆＃39;出现在控制台中。

我也试过这个函数：

function startListener() {
    parent.document.addEventListener('mouseup',outputInput,false);
    parent.document.removeEventListener('mouseup',outputInput,false);
    parent.document.addEventListener('mouseup',outputInput,false);
}

具有相同的结果

任何帮助表示赞赏：D

Answer 1

您需要从文档中清除所有mouseup个事件。在这里，您有2个选项。

选项1：使用jQuery，但是很干净：

使用

function startListener() {
    $(parent.document).off('mouseup');
    $(parent.document).on('mouseup', function () {
        // do event handler stuff here
    });
}

进入TESTbuffer.php。

选项2：不使用jQuery，但是很脏：

使用此（written by me, with no help whatsoever）：

var el = parent.document.body,
    elClone = el.cloneNode(true);

el.parentNode.replaceChild(elClone, el);

在TESTbuffer.php中

，并将您的活动附加到body而不是文档：

parent.document.body.addEventListener('mouseup', outputInput, false);

removeEventListener不起作用

TESTbuffer.php

TESTparent.php

1 个答案: