1つの要素でタッチスタート、別の要素でドラッグする

Question

私は、一度に2つの異なる色を選択できるようにするべきカラーピッカーを持っています。このように動作するはずです。 最初の色にタッチ - > 2番目の色にドラッグ - > 2番目の色で指を離します。 問題は、今、画面から指を持ち上げると、最初の色でトゥイェンドイベントが発生するということです。それは、しかし、クリックでうまく動作します。

$('.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>

問題を複製するためには、それがタッチをシミュレートしてクロム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>

注：このスクリプトは、デスクトップ上にもう動作しません。これはタッチデバイスでのみ機能します。