Как убрать все тач(клики) события при mousemove и как исправить проблему 90 градусов при событии deviceorientation?

Question

[Никита]

Есть параллакс-эффект двух div'ов при движении курсора мыши по секции и все работает отлично. Но этот эффект, к сожалению, также срабатывает на мобильных девайсах когда я тапаю в любом месте в пределах секции. Данный эффект по тапу нежелателен на мобильных устройствах, потому что для параллакса тех же div'ов я могу использовать акселерометр и наклонять устройство в разные стороны. Как сделать так чтобы событие mousemove работало только с мышкой?

Вторая проблема связана с параллаксом по акселерометру, в принципе работает все тоже неплохо, за одним исключением - когда наклон устройства переходит точку в 90 градусов вокруг любой оси, то мои div'ы отскакивают в начальную позицию своих координат и продолжают также нормально двигаться, но только с начала. В конечном итоге хочу, чтобы у них был параллакс без дерганья в пределах наклона устройства, либо же другое красивое решение :)

var     genSection = document.querySelector('.general'), //Секция
        cardOne = document.getElementById('card1'), 
        cardTwo = document.getElementById('card2'), 
        //Тень под вторым дивом, движение по Х также повторяется
        shadow = document.querySelector('.c__shadow');


// По курсору мыши
genSection.addEventListener('mousemove', function(e){

        var pageX = e.clientX,
        pageY = e.clientY;

        cardOne.style.transform = 'translateX(' + pageX/50 + '%) translateY(' + pageY/40 + '%)';
        cardTwo.style.transform = 'translateX(' + pageX/150 + '%) translateY(' + pageY/250 + '%)';
        shadow.style.transform = 'translateX(' + pageX/150 + '%)';

});


// По акселерометру!
window.addEventListener('deviceorientation', function(e){

var   pageX = e.gamma,//Гамма - крутим вокруг оси Y
      pageY = e.beta; //Бета - крутим вокруг оси X

      cardOne.style.transform = 'translateX(' + pageX/2 + '%) translateY(' + pageY/4 + '%)'; 
      cardTwo.style.transform = 'translateX(' + pageX/2 + '%) translateY(' + pageY/5 + '%)';
      shadow.style.transform = 'translateX(' + pageX/2 + '%)';

    //Инверсия в ландшафтном режиме
    if(window.innerWidth > window.innerHeight){
        cardOne.style.transform = 'translateX(' + pageY*2 + '%) translateY(' + pageX/4 + '%)'; 
        cardTwo.style.transform = 'translateX(' + pageY + '%) translateY(' + pageX/5 + '%)';
        shadow.style.transform = 'translateX(' + pageY + '%)';
    }

});

UPD первый вопрос решен, второй актуален.

Comments

[shmatuan]

if(window.screen.width >= 1024)

[Никита]

shmatuan, я уже думал подобным образом сделать, правда в моем случае это 992px :), но к сожалению этот вариант не подходит так как я хочу узнать как отключить именно клик-события (втч тач).

Answer 1

[Antony Tkachenko]

Посмотрите как modernizr определяет тач-события

https://github.com/Modernizr/Modernizr/blob/master...

Если есть тач - инициируйте deviceorientation, иначе - по mosemove

Comments

[Никита]

Спасибо, по первой проблеме решение оказалось намного проще чем я думал)
Проблема с наклоном в 90 градусов, к сожалению, еще актуальна.

[Antony Tkachenko]

Никита, выложите пример на codepen, может смогу помочь.

[Никита]

Antony Tkachenko, вот codepen