按鈕單次點擊

2018/06/28;10:43am
//日期點擊無連續（上）下一頁，只能點擊一次
$('#previous-month').on('click', function () {
    var leftBtn = $('#wrapper').scrollLeft();
    $('#wrapper').animate({
        scrollLeft:leftBtn - 100
    },300);
});
$('#next-month').on('click', function () {
    var rightBtn = $('#wrapper').scrollLeft();
    $('#wrapper').animate({
        scrollLeft: rightBtn + 100
    }, 300);
});

按鈕單次點擊與長按點擊效果（setInterval mousemove mouseup 滾動視窗效果）

2018/06/28 ; 10:30am
//html -
<div id="previous-month" class="leftArrow trigger prev">
   <a href="#" class="text-primary">
       <i class="fas fa-4x fa-angle-left"></i>
   </a>
</div>
<div id="next-month" class="rightArrow trigger next">
   <a href="#" class="text-primary">
       <i class="fas fa-4x fa-angle-right"></i>
   </a>
</div>


//js - 日期點擊後連續（上）下一頁，按鈕長按，連續觸發與單次點擊。
var preTimeTrigger;
$("body").on("mousedown", "#previous-month", function () {
    // $("#previous-month").on("mousedown", function () {
    var wrap = $('#wrapper');
    // console.log("wrap = " + wrap);
    var rightPos = wrap.scrollLeft();
    // console.log("rightPos = " + rightPos);
    if (rightPos >= 0) {
        // console.log("scrolling");
        wrap.stop().animate({
            scrollLeft: rightPos - 100
        }, 300);

        function ScrollLeft() {
            wrap.stop().animate({
                scrollLeft: rightPos - 100
            }, 300);
            rightPos = rightPos - 100;
        };
        preTimeTrigger = setInterval(ScrollLeft, 250);
    };
    $(this).on("mousemove", function () {
        $(this).mouseup();
    });
}).on("mouseup", "#previous-month", function () {
    console.log("mouse Up");
    clearInterval(preTimeTrigger);
});

var nexTimeTrigger;
$("body").on("mousedown", "#next-month", function () {
    // $("#next-month").on("mousedown", function () { 這兩段都可以運用，所以可以試試看。
    var wrap = $('#wrapper');
    //console.log("wrap = " + wrap);
    var leftPos = wrap.scrollLeft();
    //console.log("leftPos = " + leftPos);
    if (leftPos >= 0) {//到頂（尾）端時候要停止概念
        //console.log("scrolling");//只是要讓我知道程式是否有跑入而已。
        wrap.stop().animate({
            scrollLeft: leftPos + 100
        }, 300);
        function scrollRight() {
            wrap.stop().animate({
                scrollLeft: leftPos + 100
            }, 300);
            leftPos = leftPos + 100;
        };
        nexTimeTrigger = setInterval(scrollRight, 250);
    };
    //解決拖曳時，無法觸發mouseup的問題(ps:點擊加上拖曳時候會自己連續向右邊滾動，會做跑完動作，需要加上這段去加強終止過程！)
    $(this).on("mousemove", function () {
        $(this).mouseup();
    });
})
//強制setInterval設置停止與循環過程
.on("mouseup", "#next-month", function () {
   //ㄥconsole.log("mouse Up");
    clearInterval(nexTimeTrigger);
});