removeEventListner not working

Question

I have recreated my problem in the smallest amount of code I could think of Lol

Basically, I have an iFrame that uses addEventListener using data that the user has posted though a form. It works well, until the user posts again, and then 2 EventListeners are present. I have tried using removeEventListener but this is not working in this case.

Here is what I have done to recreate the problem:

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>

Here's what happens if you follow these steps:

Enter 'hello' and click 'Go'
click anywhere on the screen, then 'hello' appears in the console.
Enter 'bye' and click 'Go'
click anywhere on the screen, then 'hello' and 'bye' appears in the console.

I have also tried the function as:

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

with the same result

Any help appreciated :D

Where exactly are we supposed to type "hello" and click "Go" ? — adeneo, Jun 22 '14 at 19:57
Any problem clarification that involves the expression 'lol' worries me, and implies rather strongly (if not literally) that you're not taking our attempts to help seriously. — David Thomas, Jun 22 '14 at 20:03
@Stretch - so you want us to recreate your site and your problem somewhere ? — adeneo, Jun 22 '14 at 20:08
@adeneo That's what most users who come here want us to do, yes. — Bluefire, Jun 22 '14 at 20:17
I take all answers seriously, just thought it was funny that he hadn't read the question — Just Lucky Really, Jun 22 '14 at 20:19
The problem here is that your `TESTbuffer.php` page reloads with each form submission. When the page reloads, the newly-reloaded page has a brand new JavaScript environment, which means a brand new `outputInput`. You're trying to remove the `outputInput` of the *new* page, which is differnet fro the `outputInput` of the *old* page, which has vanished. — apsillers, Jun 22 '14 at 20:44
@aspillers - Ah I see now ... So is there a way I can remove it? — Just Lucky Really, Jun 22 '14 at 20:50
@Stretch I'm not sure -- which is why I didnt post an answer. Do JavaScript properties on `parent` persist between reloads? If so, you might try saving a reference to the function as a property on `parent`, and then removing that function as a listener on reload (and then, of course, saving the *new* function as a `parent` property). — apsillers, Jun 22 '14 at 20:52
@Stretch - Yes. If you implement the event using jQuery, you can flush all events, including the one you added, with `.off()`. — Bluefire, Jun 22 '14 at 20:54
@Blufire - I'm trying to avoid using jQuery for this project — Just Lucky Really, Jun 22 '14 at 20:55
@Stretch - The best, and possibly only way to do it in this case would be to flush all events from the document. Sadly, plain JS has no such function, while jQuery does. — Bluefire, Jun 22 '14 at 20:58
Wait a second... you could, as a dirty hack, copy your main element. This would copy everything inside it, but not the events attached to it, thus removing all of them. — Bluefire, Jun 22 '14 at 20:59

score 0 · Answer 1 · edited May 23 '17 at 12:05

You'll need to flush all of the mouseup events from the document. Here, you have 2 options.

Option 1: uses jQuery, but is clean:

Use

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

into TESTbuffer.php.

Option 2: doesn't use jQuery, but is dirty:

Use this (written by me, with no help whatsoever):

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

el.parentNode.replaceChild(elClone, el);

in TESTbuffer.php, and attach your events to the body instead of the document:

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

removeEventListner not working

TESTbuffer.php

TESTparent.php

1 Answers1