我有一些HTML元素，它们提供了拖放前后元素，这些元素由HTML，CSS和Javascript完成
现在我正在尝试使用支持触控功能的设备，但我的处理程序并未在移动设备上运行
HTML：
CSS：
#progress {
cursor: pointer;
width: 42%;
float: left; padding-top:5px;
}
#progress #progress_box {
float: left;
width: 100%;
height: 14px;
background: rgba(110,116,126,1);
background: -moz-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(110,116,126,1)), color-stop(23%, rgba(110,116,126,1)), color-stop(50%, rgba(110,116,126,1)), color-stop(50%, rgba(87,94,106,1)), color-stop(100%, rgba(87,94,106,1)));
background: -webkit-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
background: -o-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
background: -ms-linear-gradient(top, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
background: linear-gradient(to bottom, rgba(110,116,126,1) 0%, rgba(110,116,126,1) 23%, rgba(110,116,126,1) 50%, rgba(87,94,106,1) 50%, rgba(87,94,106,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e747e', endColorstr='#575e6a', GradientType=0 );
margin: 2px 0 0 5px;
xpadding: 2px;
overflow: hidden;
}
Js：
var rangesliderContainer = document.createElement('div'),
selectionBar = document.createElement('div'),
leftHandler = document.createElement('div'),
rightHandler = document.createElement('div');
rangesliderContainer.style.position = 'relative';
rangesliderContainer.style.top = '-1em';
rangesliderContainer.style.height = '100%';
rangesliderContainer.id='rangeSlider';
rangesliderContainer.setAttribute('data-myval','0');
selectionBar.style.height = '60%';
selectionBar.style.position = 'absolute';
selectionBar.style.left = '0%';
selectionBar.style.right = '0%';
selectionBar.style.backgroundColor = '#f3752b';
selectionBar.style.opacity = '0.8';
leftHandler.className = 'left';
leftHandler.style.position = 'relative';
leftHandler.style.width = '0.3em';
leftHandler.style.height = '100%';
leftHandler.style.backgroundColor = '#fff';
//leftHandler.style.left = '-0.5em';
leftHandler.style.height='2em';
leftHandler.style.backgroundColor = '#f3752b';
rightHandler.className = 'right';
rightHandler.style.position = 'absolute';
rightHandler.style.width = '0.3em';
rightHandler.style.height = '100%';
rightHandler.style.backgroundColor = '#fff';
rightHandler.style.right = '-0.5em';
rightHandler.style.top = '0';
rightHandler.style.height='2em';
rightHandler.style.backgroundColor = '#f3752b';
rangesliderContainer.appendChild(selectionBar);
selectionBar.appendChild(leftHandler);
selectionBar.appendChild(rightHandler);
$('.vjs-progress-holder').append(rangesliderContainer);
var onMouseMove = function (event) {
var totalWidth = rangesliderContainer.offsetWidth;
var leftEdge = rangesliderContainer.getBoundingClientRect().left;
var position = event.pageX;
var x = event.pageX - $('#rangeSlider').offset().left;
//sometime x goes to negative so added Math.max
var percent = Math.max(0, x / $('#rangeSlider').width());
// var startTime = secondsToHms(percent * player.duration) ;
// var endTime = secondsToHms(percent * player.duration) ;
var currentLeft = parseFloat(selectionBar.style.left),
currentRight = parseFloat(selectionBar.style.right),
newLeft = Math.min(100, (Math.max(0, position - leftEdge) / totalWidth * 100)),
newRight = Math.min(100, (100 - (Math.min(totalWidth, position - leftEdge) / totalWidth * 100)));
if (activeHandler.className === 'left') {
if (newLeft > 100 - currentRight) {
// activeHandler = activeHandler === leftHandler ? rightHandler : leftHandler;
// selectionBar.style.right = newRight + '%';
selectionBar.style.left = (100 - currentRight) + '%';
leftSpan.innerHTML = startTime;
} else {
selectionBar.style.left = newLeft + '%';
leftSpan.innerHTML = startTime;
}
} else {
if (100 - newRight < currentLeft) {
// activeHandler = activeHandler === leftHandler ? rightHandler : leftHandler;
// selectionBar.style.left = newLeft + '%';
selectionBar.style.right = (100 - currentLeft) + '%';
rightSpan.innerHTML = endTime;
} else {
selectionBar.style.right = newRight + '%';
rightSpan.innerHTML = endTime;
}
}
};
var onMouseUp = function () {
//alert('dfdff');
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
leftHandler.addEventListener('touchmove', onMouseMove);
leftHandler.addEventListener('touchend', onMouseUp);
rightHandler.addEventListener('touchmove', onMouseMove);
rightHandler.addEventListener('touchend', onMouseUp);
};
var onMouseDown = function () {
activeHandler = this;
// alert('dfdff');
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
leftHandler.addEventListener('touchmove', onMouseMove);
leftHandler.addEventListener('touchend', onMouseUp);
rightHandler.addEventListener('touchmove', onMouseMove);
rightHandler.addEventListener('touchend', onMouseUp);
};
leftHandler.addEventListener('mousedown', onMouseDown);
rightHandler.addEventListener('mousedown', onMouseDown);
为触控和桌面浏览器添加了处理程序的事件，适用于桌面但不适用于触控设备
leftHandler.addEventListener('touchmove', onMouseMove);
leftHandler.addEventListener('touchend', onMouseUp);
rightHandler.addEventListener('touchmove', onMouseMove);
rightHandler.addEventListener('touchend', onMouseUp);
有人可以帮我吗？
小提琴：Fiddle
答案 0 :(得分：2)
触摸屏上与HTML5相关的最佳解决方案将使用jQuery UI Touch Punch。您可以在此站点上找到非常好的工作示例，这些示例在桌面和移动设备上都能很好地运行。
旁注：请不要reinvent the wheel。根据我的经验，使用强大的第三方库/组件（例如纯粹的的jQuery），开发过程会更快，更容易，更多......等等。 / p>
答案 1 :(得分：1)
在move事件处理程序中，您使用的是event.pageX。由于触摸设备可以有多个触摸点（即捏合），因此您需要查看事件的changedTouches数组。
使用：event.changedTouches[0].pageX
答案 2 :(得分：0)
我在这里找到答案Question
我添加的代码与已接受的答案相同，现在我可以使用触摸设备拖动元素
function touchHandler(event) {
var touch = event.changedTouches[0];
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup"
}[event.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init() {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
需要在文档准备中调用init（）
只有缺陷才能从触摸设备中禁用缩放变焦
根据@ Quantastical的回答，我了解到event.changedTouches[0]对于触摸设备更为重要，所以我要给予赏金。