判断左滑右滑上滑下滑

判断左滑右滑

$('.guide_box').bind('touchstart', function(e) {
        startX = e.originalEvent.changedTouches[0].pageX,              //手机端写法
            startY = e.originalEvent.changedTouches[0].pageY;
    });
    $('.guide_box').bind('touchmove', function(e) {
        //获取滑动屏幕时的X,Y
        endX = e.originalEvent.changedTouches[0].pageX,
            endY = e.originalEvent.changedTouches[0].pageY;
        //获取滑动距离
        distanceX = endX - startX;
        distanceY = endY - startY;
        //判断滑动方向
        if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) { //左滑
            $(".gold_area").css("transform", "translateX(0%)");
            $(".occupy").css("transform", "translateX(0)");
        } else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) { //右滑
            $(".gold_area").css("transform", "translateX(-100%)");
            $(".occupy").css("transform", "translateX(100%)");
        } else {
            console.log("haha")
        }

    });

解决点击空白区域弹窗消失

html

<div class="member_info_shade">
                    <div class="alter_photo_box">
                        <div class="relevance_photo">
                            <span class="photograph">拍照</span>
                            <span class="photo_albums">我的相册</span>
                        </div>
                        <div class="cancel_opacity_photo">取消</div>
                    </div>
                    
                    <!-- 昵称 -->
                    <div class="nickname_box">
                        <span class="nickname_txt">太阳集市昵称</span>
                        <input type="text" placeholder="4-20个字符,可由中英文·数字·'_'组成">
                        <span class="nickname_confirm">确定</span>
                    </div>
                </div>

$(function(){
    $(".member_info_shade").bind('click',function(e){
        var target=$(e.target);
        if(target.closest(".filtrate_content").length==0){
            $(".member_info_shade").hide()
        }
    })
})