Mouseup event not firing with code inside function

Question

I'm trying to create Press & Hold confirmation button with jQuery. The problem is that mouseup event is not firing when I insert code within this function. It only fires when the function is empty and there is only console.log. Here is example:

self.on('mousedown touchstart', function(e) {
    e.preventDefault();
    self.addClass('-loading -progress');
    clickDuration = setTimeout(function(e) {
        self.trigger('click').removeClass('-progress');
        console.log('clicked for 2 seconds');
    }, parseInt(confirmDuration));
    console.log(e);
}).on('mouseup touchend', function(e) {
    self.removeClass('-loading -progress');
    clearTimeout(clickDuration);
    console.log(e);
});

mouseup won't fire.

self.on('mousedown touchstart', function(e) {
    e.preventDefault();
    console.log(e);
}).on('mouseup touchend', function(e) {
    console.log(e);
});

mouseup will fire.

Anyway I have created full example of my code and you can play with it live here: https://jsbin.com/bozusiboku/1/edit?js,output

Thanks!

Answer 1

Your code works if you remove the class -loading from your statement self.addClass('-loading -progress');.

-loading adds the CSS pointer-events: none, which disables mouse events on your button and keeps mouseup from firing.

See: MDN: Pointer Events.