使用滚动条时防止 mousedown 功能

发布于 2024-11-02 10:00:12 字数 751 浏览 4 评论 0原文

我有一个显示链接 onclick 的 div，我想在 div 外部单击鼠标时隐藏（类似于大多数模式框功能） - 问题是，当用户使用浏览器滚动条时，这被认为是单击并隐藏 div

这是我用来显示 div 的内容，

$('.trigger').click(function(e){
    e.preventDefault();
    open_slideout(this);
});

function open_slideout(el){
    $(document).unbind('mousedown');

    //code here to display the div if its not already shown

    //close on click-out
    $(document).bind('mousedown',function(){
        $(panel_id).removeClass('active').hide('fast');
        $(el).removeClass('active');
    });
    $('.panel.active').bind('mousedown',function(e){e.stopPropagation();});
    $('.trigger').bind('mousedown',function(e){e.stopPropagation();});
}

因此如果他们在活动区域内单击，我设置了 stopPropagation，但就像我说的，如果他们使用滚动条，它会隐藏 div

原文

I've got a div that shows onclick for a link and I want to hide when the mouse is clicked outside the div (similar to most modal box functionality) - the problem is that when the user uses the browser scrollbar, that is considered a click and hides the div

this is what i use to show the div

$('.trigger').click(function(e){
    e.preventDefault();
    open_slideout(this);
});

function open_slideout(el){
    $(document).unbind('mousedown');

    //code here to display the div if its not already shown

    //close on click-out
    $(document).bind('mousedown',function(){
        $(panel_id).removeClass('active').hide('fast');
        $(el).removeClass('active');
    });
    $('.panel.active').bind('mousedown',function(e){e.stopPropagation();});
    $('.trigger').bind('mousedown',function(e){e.stopPropagation();});
}

so I've set the stopPropagation if they click within the active area, but like I said, if they use the scrollbar it hides the div

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

面犯桃花 2024-11-09 10:00:12

这似乎已经成功了：

$(document.body).bind('mousedown',function(){

this seems to have done the trick:

$(document.body).bind('mousedown',function(){

回复收藏 0 原文

舞袖。长 2024-11-09 10:00:12

$(window).scroll(function(){
   scrolling = true;
});

/*other code */
$(document).bind('mousedown',function(){
if(!scrolling){
        $(panel_id).removeClass('active').hide('fast');
        $(el).removeClass('active');
}
    }).bind('mouseup',function(){ scrolling = false; })
/*other code */

$(window).scroll(function(){
   scrolling = true;
});

/*other code */
$(document).bind('mousedown',function(){
if(!scrolling){
        $(panel_id).removeClass('active').hide('fast');
        $(el).removeClass('active');
}
    }).bind('mouseup',function(){ scrolling = false; })
/*other code */

回复收藏 0 原文

~没有更多了~