Why can I off a mousedown event, but not its chained mouseup event?

Question

I have two chained mouse-events:

$('body > form').on("mousedown", function(e){ 
    //Do stuff 
}).on("mouseup", function(){
    /*More stuff, including
       window.addEventListener(...
    */  
});

However, when I try to off() them both from another external function, I can only off() mousedown, but not mouseup, whose functionality continues to work.

Could that nested addEventListener be preventing me from offing its event? (

By the way, it doesn't matter how I chain: ($().off().off();), or unchain ($().off(); $().off();), or combine ($().off(A B);) or reverse (A B <-> B A) the elements; consistently, off(mousedown) works, but never off(up).

Here's my full JS code:

(The problematic part is the 2nd script, at the end:)

<script>
function comment() {

    $('body > form').on("mousedown.markerPlacer", function(e){   
     //Place the cursor marker on the screen 

        var newComment2 = $('<div id="newComm" class="marker" class="deg45" &uarr;</div>');
        $('form').append(newComment2);  

    }).on("mouseup", function(){   
    //Now use the Q-key to rotate the marker.

       window.addEventListener("keydown", extraKey, false); 
       window.addEventListener("keyup", keysReleased2, false); 

            function extraKey(e) {
                var deg = e.keyCode;  
                    if (deg == 81)  { //81 is the keycode, which codes for Q
                        $('#newComm').attr('class', 'marker').addClass('deg0'); 
                    } else {
                        return false;
                    };  
                    e.preventDefault(); 
            };                 
            function keysReleased2(e) {
                e.keyCode = false;
            };
    });  
};
</script>

<script>
function dismissComment() {
        $('body > form').off("mousedown mouseup");    
}
</script>

Provide a [mcve]. We can't see how you are attempting to use `off()` without proper code context — charlietfl, Jan 19 '17 at 01:06
@Bindrid, what does that mean, and why would it make a difference, since they're both .on events? — rudminda, Jan 19 '17 at 01:08
@charlietfl, Sure, but that'll M-C-V answer will take me a few minutes to produce. — rudminda, Jan 19 '17 at 01:08
Take a look at https://learn.jquery.com/plugins/basic-plugin-creation/ — Bindrid, Jan 19 '17 at 01:12
My guess is you are hoping that `off()` will remove whatever listener you create inside the `on()` ...but that is not the case. Once you add a listener it will remain until it is removed — charlietfl, Jan 19 '17 at 01:15
off $.off() will take of all events for the object unless you put limits in the parameters such as .off("click") — Bindrid, Jan 19 '17 at 01:17
OK, so my full code is posted. Hmm. If you're right, then I have to remove that event listener. The problem is that if I post the required 2 lines of code.............. . . . `window.removeEventListener("keydown", extraKey, false);` `window.removeEventListener("keyup", keysReleased2, false);` ..............anywhere, then I can only push Q to turn the marker once. Repeat-turns are disabled. But maybe I can figure out a way. — rudminda, Jan 19 '17 at 01:26
Is there a better way to do this (trigger extraKey() & keysReleased2()) without Event listeners? I tried chaining `.on(mousedown).on(keydown).on(keyup)`, but that only maed the keydown and keyup events not work, so that I couldn't rotate the marker at all.. — rudminda, Jan 19 '17 at 01:29
@Bindrid - Thanks! I'll have to learn about plugins! (I don't know the first thing about them.) — rudminda, Jan 19 '17 at 01:31
this worked: $("button").on("mousedown",function () { $("span").css("background-color", "red") }).on("mouseup", function () { $("span").css("backgroundColor", "blue") }) — Bindrid, Jan 19 '17 at 01:36

score 1 · Answer 1 · answered Mar 30 '17 at 02:00

Out of curiosity I wrote a similar chained mousedown and mouseup as shown in your code.
And I unbind them on button click. It seems to work fine and I'm not able to reproduce your issues.
It's able to "off" both mousedown and mouseup event listener.

$("#testMe")
  .on("mousedown", function(e) {
    appendText(getButton(e.button) + " | " + $(this).attr("id") + " | " + "mouseDOWN | " + new Date());
  })
  .on("mouseup", function(e) {
    appendText(getButton(e.button) + " | " + $(this).attr("id") + " | " + "mouseUP | " + new Date());

    $(document).off("keydown keyup");
    $(document).on("keydown", keydown_pressed);
    $(document).on("keyup", keyup_pressed);
  });

Unbind / "off" code

$("#unbind").click(function(e) {
  $("#testMe").off("mousedown mouseup");
  $(document).off("keydown keyup");
});

On page load, mousedown and mouseup are attached to input textbox.

After mouseclick on textbox, window keydown and keyup event listeners are added.

After I "off" or unbind, all event listeners are removed.

jsfiddle link

Why can I off a mousedown event, but not its chained mouseup event?

Here's my full JS code:

1 Answers1