我有一个颜色选择器,应该允许一次选择两种不同的颜色;应该是这样的。触摸第一种颜色->拖动到第二种颜色->在第二种颜色上释放手指。问题是,现在当我把手指从屏幕上抬起时,触点事件会在第一种颜色上触发。不过,它可以很好地处理点击。
$('.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">
<li class="single-color" data-color="#4DB023" data-index="0" style="background-color: #4DB023">
</li>
<li class="single-color" data-color="#1E6B3D" data-index="1" style="background-color: #1E6B3D">
</li>
<li class="single-color" data-color="#233778" data-index="2" style="background-color: #233778">
</li>
<li class="single-color" data-color="#3098FF" data-index="3" style="background-color: #3098FF">
</li>
<li class="single-color" data-color="#FF0000" data-index="4" style="background-color: #FF0000">
</li>
<li class="single-color" data-color="#38889C" data-index="5" style="background-color: #38889C">
</li>
<li class="single-color" data-color="#483063" data-index="6" style="background-color: #483063">
</li>
</ul>
要重复这个问题,请查看上面的代码片段,在Chrome响应工具中将视口设置为iPhone6,以便模拟触摸。
我用这个答案解决了:把元素放在触摸端
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">
<li class="single-color active1" data-color="#4DB023" data-index="0" style="background-color: #4DB023">
</li>
<li class="single-color" data-color="#1E6B3D" data-index="1" style="background-color: #1E6B3D">
</li>
<li class="single-color" data-color="#233778" data-index="2" style="background-color: #233778">
</li>
<li class="single-color" data-color="#3098FF" data-index="3" style="background-color: #3098FF">
</li>
<li class="single-color" data-color="#FF0000" data-index="4" style="background-color: #FF0000">
</li>
<li class="single-color active1 active2" data-color="#38889C" data-index="5" style="background-color: #38889C">
</li>
<li class="single-color" data-color="#483063" data-index="6" style="background-color: #483063">
</li>
</ul>
注意:这个脚本在桌面上不再工作了。