jQuery trigger function when mousedown or touchend event happen outside selector area

Question

Scenario: user clicks on a element, then drags it. Dragging ends elsewhere though. I noticed that when this happens, if I listen to the element that's being dragged, it won't trigger anything unless the cursor is released on the same element when dragging finishes.

How do I trigger an event that starts on an element but ends anywhere else on document?

$('#hotels-slider-handle').on('mouseup touchend click', function() {
    $('#booking-input').trigger('change');
});

get the elements in mousedown and mouseup, check if mouseup is outside of mousedown, trigger the request — Cerlin, Dec 05 '14 at 07:39
oh really? I just did that but thought it was a poor choice... :) well seems I didn't find any better — unfulvio, Dec 05 '14 at 07:58

score 0 · Answer 1 · answered Dec 05 '14 at 08:01

in answer to Cerlin Boss who commented to my original post above... this is what I came up with and works well (what I need to trigger gets triggered just fine) - I was looking for more efficient solutions though (ignore the jQuery delays, they're necessary in my scope)

var bookingFormInputs = $('#booking-input'),
    hotelsSlider = $('#hotels-slider');
$('#hotels-slider-handle').on('mousedown touchstart', function() {
    $(document).delay(300).one('mouseup touchend', function() {
        $(bookingFormInputs).delay(600).trigger('change');
    });
    $(hotelsSlider).delay(300).one('mouseleave', function() {
        $(document).on('mouseup touchend', function() {
            $(bookingFormInputs).delay(300).trigger('change');
        });
    });
});

jQuery trigger function when mousedown or touchend event happen outside selector area

1 Answers1