IE上滚动条bug

1、在html中生成滚动条,在IE上用鼠标按住滚动条进行左右拖动,然后松开鼠标,此时移动鼠标,滚动条还在继续滚动

原因:在IE上,鼠标按下,抬起,不会处理为mouseup事件,而是mousemove事件。

$('#div').on('mousedown', function (e) {
var el = $(e.currentTarget)
e.currentTarget.dataset.movable = true
e.currentTarget.dataset.x = e.pageX

$(window).on('mousemove', function (e) {

})

$(window).one('mouseup', function (e) {
el[0].dataset.movable = false
el[0].dataset.x = e.pageX
$(window).off('mousemove')
})
})

解决方案:

$('#div').on('mousedown', function (e) {
var _this = this;
var el = $(e.currentTarget)
e.currentTarget.dataset.movable = true
e.currentTarget.dataset.x = e.pageX

$(window).on('mousemove', function (e) {
var moveLeft = $(_this).scrollLeft();
$(_this).scrollLeft(moveLeft);
el[0].dataset.movable = false;
el[0].dataset.x = e.pageX;
$(window).off('mousemove');
})

$(window).one('mouseup', function (e) {
el[0].dataset.movable = false
el[0].dataset.x = e.pageX
$(window).off('mousemove')
})
})
posted @ 2018-04-17 14:06  十月芬芳  阅读(258)  评论(0编辑  收藏  举报