Question

我正在尝试构建一个代码，当用户在模态之外单击时，该代码将退出模态。问题是，当我单击垂直滚动条时，由于某种原因它会触发事件。这是我的代码

  $(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');
      }
    });

是否有一种方法可以在单击或使用滚动条时不触发事件？

这是HTML，由于内容太长，因此将删除整个内容。我在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

您可能会使用此技巧。

您可以尝试劫持mousedown和mouseup事件，并在单击具有自定义功能的滚动条时避免它们。

$.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" );
};

还有mousedownScroll和mouseupScroll事件的反函数。

$.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" );
};

顺便说一句，我认为滚动条宽度是操作系统设置。

Answer 2

花太多时间尝试找出方法。最终做到了

    $(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');
        }
      }
    });

我获得了用户浏览器窗口的坐标并分配了一个变量，然后我减去了50，这意味着如果用户单击窗口右侧50个像素以内，则不会触发。如果你们还有其他方法可以解决此问题，请给出答案。

鼠标按下事件时忽略滚动条

2 个答案: