lsm/layui
1
0
Fork 0
mirror of https://gitee.com/layui/layui.git synced 2025-04-05 17:38:02 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(colorpicker): 修复移动端颜色选取异常 (#1986)

Browse Source 
1. 修复移动端颜色选取异常
2. 修复移动端游标无法拖动的问题
This commit is contained in:
morning-star 2024-06-08 14:57:10 +08:00 committed by GitHub
parent 6a69c72533
commit 124e3be816
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/modules/colorpicker.js
View File

@ -448,6 +448,11 @@ layui.define(['jquery', 'lay'], function(exports){
elemMove.remove(); elemMove.remove();
}); });
}; };
// 移动端滑动模拟事件中
// 1. 不触发游标上绑定的事件，以提高性能，使滑动更流畅
// 2. 游标上的事件需要冒泡到颜色拾取区域，用来模拟拖动游标的效果
var needTrigger = true;
var needStopPropagation = true;
//右侧主色选择 //右侧主色选择
slider.on('mousedown', function(e, triggerEvent){ slider.on('mousedown', function(e, triggerEvent){
@ -463,8 +468,7 @@ layui.define(['jquery', 'lay'], function(exports){
change(h, _s, _b, _a); change(h, _s, _b, _a);
e.preventDefault(); e.preventDefault();
}; };
needStopPropagation && layui.stope(e);
layui.stope(e);
createMoveElem(move); createMoveElem(move);
e.preventDefault(); e.preventDefault();
}); });
@ -477,7 +481,7 @@ layui.define(['jquery', 'lay'], function(exports){
_h = h; _h = h;
change(h, _s, _b, _a); change(h, _s, _b, _a);
e.preventDefault(); e.preventDefault();
slider.trigger('mousedown', e); needTrigger && slider.trigger('mousedown', e);
}); });
//中间小圆点颜色选择 //中间小圆点颜色选择
@ -502,7 +506,7 @@ layui.define(['jquery', 'lay'], function(exports){
change(_h, s, b, _a); change(_h, s, b, _a);
e.preventDefault(); e.preventDefault();
}; };
layui.stope(e); needStopPropagation && layui.stope(e);
createMoveElem(move); createMoveElem(move);
e.preventDefault(); e.preventDefault();
}); });
@ -521,7 +525,7 @@ layui.define(['jquery', 'lay'], function(exports){
change(_h, s, b, _a); change(_h, s, b, _a);
layui.stope(e); layui.stope(e);
e.preventDefault(); e.preventDefault();
choose.trigger('mousedown', e); needTrigger && choose.trigger('mousedown', e);
}); });
//底部透明度选择 //底部透明度选择
@ -539,7 +543,7 @@ layui.define(['jquery', 'lay'], function(exports){
e.preventDefault(); e.preventDefault();
}; };
layui.stope(e); needStopPropagation && layui.stope(e);
createMoveElem(move); createMoveElem(move);
e.preventDefault(); e.preventDefault();
}); });
@ -551,7 +555,7 @@ layui.define(['jquery', 'lay'], function(exports){
_a = a; _a = a;
change(_h, _s, _b, a); change(_h, _s, _b, a);
e.preventDefault(); e.preventDefault();
alphaslider.trigger('mousedown', e); needTrigger && alphaslider.trigger('mousedown', e);
}); });
//预定义颜色选择 //预定义颜色选择
@ -579,8 +583,17 @@ layui.define(['jquery', 'lay'], function(exports){
{elem: basis, eventType: 'mousedown'} {elem: basis, eventType: 'mousedown'}
], function(i, obj){ ], function(i, obj){
lay.touchSwipe(obj.elem, { lay.touchSwipe(obj.elem, {
onTouchStart: function(){
needTrigger = false;
needStopPropagation = false;
},
onTouchMove: function(e){ onTouchMove: function(e){
touchHandler(e, obj.eventType) touchHandler(e, obj.eventType)
},
onTouchEnd: function(){
elemMove.remove();
needTrigger = true;
needStopPropagation = true;
} }
}) })
}) })