jquery 忽略mousedown事件上的滚动条

fxnxkyjh 于 11个月前发布在 jQuery

关注(0)|答案(3)|浏览(111)

我试图构建一个代码，当用户在模式外点击时，它会退出模式。问题是当我点击垂直滚动条时，它会出于某种原因触发事件。下面是我的代码

$(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>

型

jquery

来源：https://stackoverflow.com/questions/56359047/ignore-scrollbar-on-mousedown-event

3条答案

按热度按时间

bn31dyow1#

我通过检查事件的目标得到了它。如果目标没有父级，则有浏览器的选定ui元素。
public function（function）{
var p = www.example.com event.target
if（p.getParent（）== null）return;
...
}

赞(0）回复(0）举报 11个月前

ztyzrc3y2#

你可能会使用这个hack。
您可以尝试劫持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" );
};

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

赞(0）回复(0）举报 11个月前

j8ag8udp3#

花了太多的时间去想办法。最终还是这样做了

$(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像素内，它不会触发。如果你们有其他方法来解决这个问题留下一个答案。

赞(0）回复(0）举报 11个月前

我来回答

jquery 忽略mousedown事件上的滚动条

3条答案

相关问题

热门标签

最新问答