Ignore scrollbar on mousedown event

Question

I'm trying to build a code which will exit a modal when user clicks outside of the modal. The problem is when i click on vertical scrollbar it triggers the event for some reason. Here's my code

  $(document).mouseup(function(e) {
      var popup = $(".ui-dialog");

      if (!$('.ui-dialog').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
        popup.fadeOut(100);
        $('#remove').fadeOut(100, function() {
          $('#remove').remove();
        });
        $('#csbox').fadeOut(100, function() {
          $('#csbox').remove;
        });
        $('body').removeClass('custombox-lock');
      }
    });

Is there a way to not trigger the event when scrollbar is clicked or being used?

Here's the HTML, the entire content is stripped because its too long. I am on drupal 8

<div id="remove" class="js-modal-window custombox-content custombox-x-center custombox-y-center custombox-fadein custombox-open">
<div id="remove" class="js-modal-window custombox-content custombox-x-center custombox-y-center custombox-fadein custombox-open">
<div style="position: relative; height: auto; width: 700px; display: block; z-index: 601;" tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front js-signup-modal u-modal-window p-5" aria-describedby="drupal-modal" aria-labelledby="ui-id-2">
<div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix">
<span id="ui-id-2" class="ui-dialog-title">Modal Title</span>
<button type="button" class="ui-dialog-titlebar-close btn btn-sm btn-icon btn-text-secondary u-modal-window__close" id="close">
<span class="fas fa-times"></span>
</button></div>
<div id="drupal-modal" class="ui-front ui-dialog-content ui-widget-content" style="width: auto; min-height: 50px; max-height: 249px; height: auto;"></article></div></div></div></div>
<div class="custombox-overlay custombox-fadein custombox-open" style="z-index: 600;" id="csbox"></div>

Answer 1

I have got it by checking the target of event. If the target does not have a parent, there is a selected ui element of the browser.

window.onmousedown = function (event) {

var p = event.target;

if (p.getParent() == null) return;

...

}

Answer 2

Spend too much time trying to figure out the way. Eventually did this

    $(document).mouseup(function(e) {
      var container = $(".ui-dialog");
      console.log(e.target);
      var len = $(window).width() - 50;
      if (!container.is(e.target) && (container.has(e.target).length === 0) && (e.target != $('html').get(0)) &&
        len > e.originalEvent.screenX) {
        if (!$('.ui-dialog').is(e.target) && !container.is(e.target) && container.has(e.target).length == 0) {
          container.fadeOut(100);
          $('#remove').fadeOut(100, function() {
            $('#remove').remove();
          });
          $('#csbox').fadeOut(100, function() {
            $('#csbox').remove();
          });
          $('body').removeClass('custombox-lock');
        }
      }
    });

I got the coordinates of user's browser window and assigned a variable, then i subtracted 50 out of it, it means if user clicks within 50 pixels of right side of the window it wont trigger. If you guys have other ways to solve this problem leave an answer.

Answer 3

You may probably use this hack.

You could try hijacking the mousedown and mouseup events and avoiding them when click on a scrollbar with your custom powered function.

$.fn.mousedown = function(data, fn) {
    if ( fn == null ) {
        fn = data;
        data = null;
    }    
    var o = fn;
    fn = function(e){
        if(!inScrollRange(e)) {
            return o.apply(this, arguments);
        }
        return;
    };
    if ( arguments.length > 0 ) {
        return this.bind( "mousedown", data, fn );
    } 
    return this.trigger( "mousedown" );
};

And the inverse for mousedownScroll and mouseupScroll events.

$.fn.mousedownScroll = function(data, fn) {
    if ( fn == null ) {
        fn = data;
        data = null;
    }    
    var o = fn;
    fn = function(e){
        if(inScrollRange(e)) {
            e.type = "mousedownscroll";
            return o.apply(this, arguments);
        }
        return;
    };
    if ( arguments.length > 0 ) {
        return this.bind( "mousedown", data, fn );
    } 
    return this.trigger( "mousedown" );
};

By the way, I think the scrollbar width is an OS setting.