用标准javascript而不是jquery中的mousedown、mousemove和mouseup触摸事件句柄
Touch event handle with mousedown, mousemove and mouseup in standard javascript not jquery
任何人请告诉我如何创建一个触摸事件句柄,javascript中有三个可用的事件:mousedown、mousemove和mouseup?
任何想法都值得赞赏!
我对自己的问题有一个想法,我正在用它来移动我的幻灯片,如下所示:
function Dragging() {
var isDragging = false;
var isStartDragging = false;
var isEndDragging = true;
var startPoint = 0;
$('.Content-Page-List').mousedown(function (e) {
e = e || event;
if (!isStartDragging && !isDragging && isEndDragging) { isStartDragging = true; isEndDragging = false; startPoint = e.pageX; }
else { isStartDragging = isDragging = false; }
});
$('.Content-Page-List').mousemove(function () {
if (isStartDragging && !isEndDragging) { isDragging = true;}
else { return; }
});
$('.Content-Page-List').mouseup(function (e) {
e = e || event;
var leftVal = $(this).position().left;
if (isDragging && !isSlideMoving) {
var oldSlide = slide;
/* Slide move from left to right */
if (startPoint < e.pageX) {
if (leftVal == 0) return;
isSlideMoving = true;
$('.Content-Page-List').animate({ left: (leftVal + 1200) + 'px' }, 'slow', function () {
slide = parseInt(slide - 1);
contentHeight = $('.Content-Page-List').children('ul').children('li').eq(slide).height();
$('#page' + slide).parent().parent().css('background', 'rgba(243, 0, 0, 0.6)');
$('#Content-Page-List-Wrapper').css('height', contentHeight + 'px');
isStartDragging = isDragging = false;
isEndDragging = true;
isSlideMoving = false;
});
}
/*Slide move from right to left */
else {
if (leftVal == -((numOfLi * 1200) - 1200) || numOfLi == 1) return;
isSlideMoving = true;
$('.Content-Page-List').animate({ left: (leftVal - 1200) + 'px' }, 'slow', function () {
slide = parseInt(slide + 1);
contentHeight = $('.Content-Page-List').children('ul').children('li').eq(slide).height();
$('#page' + slide).parent().parent().css('background', 'rgba(243, 0, 0, 0.6)');
$('#Content-Page-List-Wrapper').css('height', contentHeight + 'px');
isStartDragging = isDragging = false;
isEndDragging = true;
isSlideMoving = false;
});
}
$('#page' + oldSlide).parent().parent().css('background', '#f4f4f4');
}
else { isStartDragging = false; isEndDragging = true; }
});
相关文章:
- 主体上的addEventListener('mousemove',..)-有多糟糕
- jQuery mouseup在拖离链接后未启动
- 如何在IE8及以前版本中处理mousemove
- AngularJS-如何在mousemove上存储鼠标坐标
- 我应该/如何清除mousemove JQuery事件侦听器
- 如何使用Javascript或jQuery代码调用mousemove
- 当在文档中拖动mouseup/mouseleve时,我想调用我的Ajax请求
- 'mousemove'画布中的事件侦听器-指针仅在最后一个矩形中更改
- mouseup出现意外行为
- 如何在拖动绑定到“mousedowd,mousemove,mouseup”的锚点时防止重定向
- jQuery UI draggable:绑定到mousemove事件中的对象
- 如何知道鼠标按钮的当前状态(mouseup状态或mousedown状态)
- javascript可拖动滑块,可在mouseUp上捕捉回中间位置
- 如何在启动mouseup时检测鼠标是否在移动
- 如何正确停止mousemove事件
- 在拖动过程中释放鼠标时忽略 JavaScript mouseUp 事件
- 用标准javascript而不是jquery中的mousedown、mousemove和mouseup触摸事件句柄
- 将javascript mousedown/mouseup/mousemove/keypress监听器移植到移动设备时,
- 如果先前调用了mousemove,则Jquery会阻止mouseup
- .mouseup()和.mousedown()不能与.mousemove()一起工作