Дескриптор события касания с mousedown, mousemove и mouseup в стандартном javascript не jquery

Question

Дескриптор события касания с mousedown, mousemove и mouseup в стандартном javascript не jquery

0

Любое тело, пожалуйста, скажите мне, как я могу создать дескриптор события касания с 3 событиями, доступными в javascript, mousedown, mousemove и mouseup?

Любая идея ценится!

HICURIN 28 нояб. 2013, в 09:23

Источник

0

Возможно, вы захотите прочитать эту статью: developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/…
cubrr 28 нояб. 2013, в 08:00
0

Извините, но я не хочу использовать холст. Просто чистый JavaScript + HTML + CSS. Спасибо за ваш ответ.
Ringo 28 нояб. 2013, в 08:06
0

Да, я понимаю это, но я пытался указать на слушателей событий и отслеживать события касания в статье.
cubrr 28 нояб. 2013, в 08:12

Показать ещё 1 комментарий

Теги:

javascript

html

css

1 ответ

Ещё вопросы

Возможно, вы захотите прочитать эту статью: developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/…
Извините, но я не хочу использовать холст. Просто чистый JavaScript + HTML + CSS. Спасибо за ваш ответ.
Да, я понимаю это, но я пытался указать на слушателей событий и отслеживать события касания в статье.

HICURIN · Answer 1 · 2013-11-28T05-53-00.000Z

У меня есть идея для моего собственного вопроса, и я использую это для перемещения слайд-шоу следующим образом:

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; }

    });