Javascript 一个元素上的touchstart，拖动，另一个元素上的touchend

我有一个颜色选择器，可以同时选择两种不同的颜色；它应该是这样工作的。 触摸第一种颜色->拖动到第二种颜色->松开第二种颜色上的手指。 问题是，现在当我从屏幕上抬起手指时，touchend事件会在第一种颜色上触发。不过，它可以在点击时正常工作

$（'.single color'）.on（'mousedown touchstart'，函数（e）{
e、 预防默认值（）；
var index=$（this.attr（'data-index'）；
$（'#color1'）.val（索引）；
$（'#color1'）.attr（'data-color'，$（this.css（'background-color'））；
log（'touchstart-index:'+$（this.attr（'data-index'））；
});
$（'.single color'）.on（'mouseup touchend'，函数（e）{
e、 预防默认值（）；
var index=$（this.attr（'data-index'）；
$（'#color2'）.val（索引）；
$（'#color2'）.attr（'data-color'，$（this.css（'background-color'））；
log（'touchend-index:'+$（this.attr（'data-index'））；
});
.colors{
列表样式：无；
保证金：0；
填充：0；
溢出：隐藏；
}
.单色{
高度：50px；
宽度：计算（50%-10px）；
保证金：0 5px 5px 5px；
浮动：左；
}
















我用这个答案解决了这个问题：


var$singleColors=$（'.single color'）；
$singleColors.on（'mousedown touchstart'，函数（e）{
e、 预防默认值（）；
var index=$（this.attr（'data-index'）；
$singleColors.removeClass（'active1'）；
$（this.addClass（'active1'）；
$（'#color1'）.val（索引）；
$（'#color1'）.attr（'data-color'，$（this.css（'background-color'））；
log（'touchstart-index:'+$（this.attr（'data-index'））；
});
$singleColors.on（'mouseup touchmove'，函数（e）{
e、 预防默认值（）；
var endTarget=document.elementFromPoint(
e、 OriginaleEvent.Touchs[0]。第页，
e、 OriginaleEvent.Touchs[0]。页面
);
var index=$（endTarget.attr（'data-index'）；
$singleColors.removeClass（'active2'）；
$（endTarget）.addClass（'active2'）；
$（'#color2'）.val（索引）；
$（'color2'）.attr（'data-color'，$（endTarget.css（'background-color'））；
log（'touchend-index:'+$（endTarget.attr（'data-index'））；
});
*{
框大小：边框框；
}
.颜色{
列表样式：无；
保证金：0；
填充：0；
溢出：隐藏；
}
.单色{
高度：50px；
宽度：计算（50%-10px）；
保证金：0 5px 5px 5px；
浮动：左；
}
.single-color.active1、.single-color.active2{
边框：2件纯黑；
}