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

Question

我有一个颜色选择器，应该允许一次选择两种不同的颜色;它应该像这样工作。 触摸第一种颜色 - >拖动到第二种颜色 - >释放第二种颜色的手指。 现在的问题是，当我从屏幕上抬起手指时，触发事件触发第一种颜色。不过，它可以很好地工作。

$('.single-color').on('mousedown touchstart', function(e) { 
 
    e.preventDefault(); 
 
    var index = $(this).attr('data-index'); 
 
    $('#color1').val(index); 
 
    $('#color1').attr('data-color', $(this).css('background-color')); 
 
    console.log('touchstart - index: ' + $(this).attr('data-index')); 
 
}); 
 

 
$('.single-color').on('mouseup touchend', function(e) { 
 
    e.preventDefault(); 
 
    var index = $(this).attr('data-index'); 
 
    $('#color2').val(index); 
 
    $('#color2').attr('data-color', $(this).css('background-color')); 
 
    console.log('touchend - index: ' + $(this).attr('data-index')); 
 
});

.colors { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
.single-color { 
 
    height: 50px; 
 
    width: calc(50% - 10px); 
 
    margin: 0 5px 5px 5px; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="colors"> 
 
\t \t \t \t \t \t 
 
    <li class="single-color" data-color="#4DB023" data-index="0" style="background-color: #4DB023"> 
 
    &nbsp; 
 
    </li> 
 

 
    <li class="single-color" data-color="#1E6B3D" data-index="1" style="background-color: #1E6B3D"> 
 
    &nbsp; 
 
    </li> 
 

 
    <li class="single-color" data-color="#233778" data-index="2" style="background-color: #233778"> 
 
    &nbsp; 
 
    </li> 
 

 
    <li class="single-color" data-color="#3098FF" data-index="3" style="background-color: #3098FF"> 
 
    &nbsp; 
 
    </li> 
 

 
    <li class="single-color" data-color="#FF0000" data-index="4" style="background-color: #FF0000"> 
 
    &nbsp; 
 
    </li> 
 

 
    <li class="single-color" data-color="#38889C" data-index="5" style="background-color: #38889C"> 
 
    &nbsp; 
 
    </li> 
 

 
    <li class="single-color" data-color="#483063" data-index="6" style="background-color: #483063"> 
 
    &nbsp; 
 
    </li> 
 

 
</ul>

复制看看上面的代码中的问题，设置在Chrome Resposive工具视口iPhone6所以它模拟触摸。

Answer 1

我解决了使用这样的回答：Get the element under a touchend

var $singleColors = $('.single-color'); 
 
$singleColors.on('mousedown touchstart', function(e) { 
 
    e.preventDefault(); 
 
    var index = $(this).attr('data-index'); 
 
    $singleColors.removeClass('active1'); 
 
    $(this).addClass('active1'); 
 
    $('#color1').val(index); 
 
    $('#color1').attr('data-color', $(this).css('background-color')); 
 
    console.log('touchstart - index: ' + $(this).attr('data-index')); 
 
}); 
 

 
$singleColors.on('mouseup touchmove', function(e) { 
 
    e.preventDefault(); 
 
    var endTarget = document.elementFromPoint(
 
    e.originalEvent.touches[0].pageX, 
 
    e.originalEvent.touches[0].pageY 
 
); 
 
    var index = $(endTarget).attr('data-index'); 
 
    $singleColors.removeClass('active2'); 
 
    $(endTarget).addClass('active2'); 
 
    $('#color2').val(index); 
 
    $('#color2').attr('data-color', $(endTarget).css('background-color')); 
 
    console.log('touchend - index: ' + $(endTarget).attr('data-index')); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.colors { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 

 
.single-color { 
 
    height: 50px; 
 
    width: calc(50% - 10px); 
 
    margin: 0 5px 5px 5px; 
 
    float: left; 
 
} 
 

 
.single-color.active1, .single-color.active2 { 
 
    border: 2px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="colors active2"> 
 
\t \t \t \t \t \t 
 
    <li class="single-color active1" data-color="#4DB023" data-index="0" style="background-color: #4DB023"> 
 
    &nbsp; 
 
    </li> 
 

 
    <li class="single-color" data-color="#1E6B3D" data-index="1" style="background-color: #1E6B3D"> 
 
    &nbsp; 
 
    </li> 
 

 
    <li class="single-color" data-color="#233778" data-index="2" style="background-color: #233778"> 
 
    &nbsp; 
 
    </li> 
 

 
    <li class="single-color" data-color="#3098FF" data-index="3" style="background-color: #3098FF"> 
 
    &nbsp; 
 
    </li> 
 

 
    <li class="single-color" data-color="#FF0000" data-index="4" style="background-color: #FF0000"> 
 
    &nbsp; 
 
    </li> 
 

 
    <li class="single-color active1 active2" data-color="#38889C" data-index="5" style="background-color: #38889C"> 
 
    &nbsp; 
 
    </li> 
 

 
    <li class="single-color" data-color="#483063" data-index="6" style="background-color: #483063"> 
 
    &nbsp; 
 
    </li> 
 

 
</ul>

注：此脚本不上桌面的工作了。它只适用于触控设备。