首页 新闻 会员 周边

如果解决模拟下拉框的事件冒泡

0
悬赏园豆：100 [已关闭问题] 关闭于 2015-01-04 15:27 
$('body').on('click', function(e) {
        if ($(e.target).hasClass('mCSB_dragger_bar')) {
            return;
        };
        $('.s-hide-box').hide();
        $('.selectbox').removeClass('s-current');
    });

模拟了一个select下拉框。滚动条用的是mCustomScrollbar这个插件。

.s-hide-box是下拉框，点击其他地方隐藏。

mSCB_dragger_bar在.s-hide-box内。

现在的问题是，mousedown按住滚动条滚动下拉框，如果不是停留在滚动条上mouseup，就会触发了body的click事件，下拉框就隐藏了。

该如何解决。

拉风的人儿的主页 拉风的人儿 | 初学一级 | 园豆：45
提问于：2014-12-19 14:47
< >
分享
所有回答(5)
0 
$(document).ready(function(){
 $('#switcher').click(function(event){
  if(event.target==this){
  $('#switcher .button').toggleClass('hidden');
  }
  })
 })

或者event.stopPropagation();
骑着蜗牛耍流氓 | 园豆：135 (初学一级) | 2014-12-19 15:09
0

两种实现：

1、e.stopPropagation();

2、function的最后 return false

幻天芒 | 园豆：37175 (高人七级) | 2014-12-19 15:37
0

event.stopPropagation();

Roc-Lee | 园豆：12 (初学一级) | 2014-12-19 15:47
0 
$(document).ready(function(){
 $('#switcher').click(function(event){
  if(event.target==this){
  $('#switcher .button').toggleClass('hidden');
     return false;
  }
  })
 })

 

hexllo | 园豆：318 (菜鸟二级) | 2014-12-24 11:11
0

设置一个全局变量downValue=true。鼠标mousedown，如果target是滚动条和下拉框就赋值为true，如果是其他地方就赋值false。然后判断downValue。问题解决了。大家可能没理解我的遇到的问题。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标拉动松开后触发的元素</title>
    <style>
        *{margin: 0; padding: 0; font-size: 14px; font-family: Tahoma;}
        .wrap{ width: 300px; margin: 10px auto;}
        .selectbox{ display: inline-block; position: relative; z-index: 1; width: 200px; background: #fff; zoom:1;}
        .s-current{z-index: 3;}
        .s-input-box{ position: relative; z-index: 2; height: 30px; line-height:30px; padding: 0 22px 0 4px; border:1px solid #cfcfcf; border-radius: 2px; overflow: hidden; white-space:nowrap; text-overflow:ellipsis;}
        .s-hide-box{ display:none; position: absolute; max-height: 100px; max-width: 600px; overflow: auto; border:1px solid #c1c1c1; border-radius:2px; background: #fff; box-shadow:0 0 5px rgba(9,2,4 ,.3);}
        .s-hide-box span{ display: block; position: relative; height: 30px; line-height: 30px; padding: 0 5px; margin: 1px; overflow: hidden; white-space:nowrap; }
        .s-hide-box span:hover{ background: #dcf2fc; cursor: default;}
    </style>
    <link rel="stylesheet" href="jquery.mCustomScrollbar.css">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.mCustomScrollbar.concat.min.js"></script>
</head>
<body>
    <div class="wrap">
        <div class="selectbox">
            <b class="ico-arr"></b>
            <div class="s-input-box">0.5小时</div>
            <div class="s-hide-box">
                <span>0.5小时</span>
                <span>1小时</span>
                <span>1.5小时</span>
                <span>2小时</span>
                <span>2.5小时</span>
                <span>3小时</span>
                <span>3.5小时</span>
                <span>4小时</span>
                <span>4.5小时</span>
                <span>5小时</span>
            </div>
        </div>
    </div>
    <script>
    $(function(){
        // selectbox
        $('.s-input-box').click(function(e) {// click select
            e.stopPropagation();
            $('.s-hide-box').hide();
            $('.selectbox').removeClass('s-current');
            $(this).next('.s-hide-box').show();
            $(this).parents('.selectbox').addClass('s-current');
            var sInputBoxHeight = $(this).outerHeight() + 1;
            var sInputBoxWidth = $(this).outerWidth() - 2;
            var sHideBoxHeight = $(this).next('.s-hide-box').outerHeight();
            $('.s-hide-box').css({
                'top' : sInputBoxHeight,
                'min-width' : sInputBoxWidth
            });
            if (sHideBoxHeight >= 200) {
                $(this).next('.s-hide-box').find('span').css({'padding-right' : '25px'});
                if ($(this).next('.s-hide-box').outerWidth() > sInputBoxWidth + 2) {
                    $(this).next('.s-hide-box').addClass('s-hide-box-border');
                };
            } else {
                $(this).next('.s-hide-box').find('span').css({'padding-right' : ''});
                $(this).next('.s-hide-box').removeClass('s-hide-box-border');
            };
        });

        var mouseDownStatus = true;
        $(document).on({
            mousedown : function(e){
                if ($(e.target).hasClass('mCSB_dragger_bar')) {
                    mouseDownStatus = true;
                    console.log(mouseDownStatus);
                }
                else if ($(e.target).hasClass('s-input-box')) {
                    mouseDownStatus = true;
                }
                else if ($(e.target).is('.s-hide-box span')) {
                    mouseDownStatus = true;
                }
                else{
                    mouseDownStatus = false;
                }
            },
            click : function(e){
                if ($(e.target).hasClass('mCSB_dragger_bar')) {
                    e.stopPropagation();
                }
                else if ($(e.target).is('.s-hide-box span')) {
                    var sItemHtml = $(e.target).html();
                    var sItemValue = $(e.target).attr('values');
                    $(e.target).parents('.s-hide-box').prev('.s-input-box').html(sItemHtml).end().hide();
                    $(e.target).parents('.s-hide-box').prev('.s-input-box').attr({'values' : sItemValue});
                    $('.selectbox').removeClass('s-current');
                }
                else{
                    if (mouseDownStatus == false) {
                        $('.s-hide-box').hide();
                        $('.selectbox').removeClass('s-current');
                    }
                }
            }
        })

        //scrollbar
        $('.s-hide-box').mCustomScrollbar();
    })
    </script>
</body>
</html>
拉风的人儿 | 园豆：45 (初学一级) | 2014-12-24 19:24
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。