jQuery视频播放器小bug，拖动进度条小圆点闪现？

Question

小插件基本实现了视频播放，只那个小圆点很讨厌闪來闪去的。

我的想法是阻止事件冒泡，亲测了下又不是这方面问题，目前很没有头绪。

HTML布局里小圆点不是作为功能使用的，仅为装饰作用。求大神指教。

html:

<div class="box">
    <video src="media/35Q888piCCPd.mp4" controls id="vd"></video>
    <div class="circle clearfix">
        <a href="javascript:;" class="cirBtn"></a>
        <div class="cirProgress"><span class="grayBar"></span><span class="redBar"><em class="dot"></em></span></div>
        <div class="cirTime"><span>00:00</span> / <span>00:00</span></div>
    </div>
</div>

css:

.box {
    margin: 0 auto;
    width: 980px;
}
.box video {
    display: block;
    width: 100%;
    height: 640px;
}
.circle {
    padding: 10px;
    background-color: #333;
}
.cirBtn {
    position: relative;
    float: left;
    width: 40px;
    height: 40px;
    border: 3px solid #fff;
    border-radius: 50%;
}
.cirBtn:after,.cirBtn:before {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
}
.cirBtn:after {
    margin-top: -10px;
    margin-left: -5px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
}
.cirPause:after,.cirPause:before {
    content: '';
    margin-top: -10px;
    width: 5px;
    height: 20px;
    background-color: #fff;
    border: 0 none;
}
.cirPause:after {
    margin-left: -9px;
}
.cirPause:before {
    margin-left: 4px;
}

.cirProgress {
    position: relative;
    float: left;
    margin-left: 15px;
    padding: 18px 0;
    width: 500px;
    height: 10px;
    cursor: pointer;
}
.cirProgress .grayBar,.cirProgress .redBar {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1.5px;
    height: 3px;
}
.cirProgress .grayBar {
    right: 0;
    background-color: #ccc;
}
.cirProgress .redBar {
    background-color: #ea4646;
}
.cirProgress .dot {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -6px;
    margin-right: -6px;
    width: 12px;
    height: 12px;
    background-color: #ea4646;
    border-radius: 50%;
    cursor: pointer;
}

.cirTime {
    float: left;
    margin: 10px 0 0 15px;
    color: #fff;
    font-size: 16px;
    line-height: 26px;
}

jq:

var $ele = $('#vd');
var ele = $ele[0];
var currenTime = 0;
var duracTime = 0;

ele.muted = true;
// 当前时长和总时长
ele.onloadedmetadata = function () {
    currenTime = ele.currentTime;
    duracTime = ele.duration;
    $('.cirTime span').eq(0).html(timeFormat(currenTime));
    $('.cirTime span').eq(1).html(timeFormat(duracTime));
}
$('.cirBtn').click(function () {
    if (ele.paused) {
        ele.play();
        $(this).addClass('cirPause');
    } else {
        ele.pause();
        $(this).removeClass('cirPause');
    }
});

function timeFormat(nums) {
    var seconds = Math.floor(nums % 60);
    if (seconds < 10) {
        seconds = '0' + seconds;
    }
    var minute = Math.floor(nums / 60);
    if (minute < 10) {
        minute = '0' + minute;
    }
    return minute + ':' + seconds;
}

// 进度条跟随
$ele.on('timeupdate',function () {
    currenTime = ele.currentTime;
    duracTime = ele.duration;
    var percent = currenTime / duracTime * 100;
    $('.redBar').css('width',percent + '%');
    $('.cirTime span').eq(0).html(timeFormat(currenTime));
    if (ele.ended) {
        $('.cirBtn').removeClass('cirPause');
    }
});

// 进度条拖拽
var lock = false;
$('.cirProgress').on('mousedown',function (ev) {
    lock = true;
    changeCurrentTime(ev.offsetX);
});
$('.circle').on('mouseup',function (ev) {
    if (lock == true) {
        lock = false;
        changeCurrentTime(ev.offsetX);
    }
}).on('mousemove',function (ev) {
    ev.stopPropagation();
    ev.preventDefault();
    if (lock == true) {
        changeCurrentTime(ev.offsetX);
    }
})

// 改变当前时间
function changeCurrentTime(x) {
    var percent = x / $('.cirProgress').width() * 100;
    if (percent >= 100) {
        percent = 100;
    }
    if (percent <= 0) {
        percent = 0;
    }
    $('.redBar').css('width',percent + '%');
    ele.currentTime = percent * duracTime / 100;
    $('.cirTime span').eq(0).html(timeFormat(ele.currentTime));
}

Answer 1

看上去抖动的原因就是触发了这个 7

那看看 target 是谁？

看上去是 cirProgress 就完事了$(ev.target).hasClass('cirProgress')

的确是没事。但是效果不对，试了试，发现是红条的问题
那我们考虑是不是 offsetX的值的问题？然后我们就解决了问题，那考考你，这几个值都代表什么？基于什么计算？