peachananr / onepage-scroll

Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin
http://peachananr.github.io/onepage-scroll/Demo/demo.html
9.54k stars 2.07k forks source link

Touchdevice onClick causes multichange #40

Open develth opened 10 years ago

develth commented 10 years ago

If you have a touch device & click and do not move on an empty space, and then do a touchmove, the pages changes for the amount of times you clicked. On Touch only. I used some onClick function and they didn´t worked, but the pages changed for the amount of onclick.

I added this work around for using onClick methods, but if you click on a "not onClick", it stills do the pagechange bug.

This is my function change:

function touchstart(event) {
     var touches = event.originalEvent.touches;

     if(!(typeof($._data(touches[0].target, "events")) !== 'undefined' && $._data(touches[0].target, "events").click != null)){
          console.log('do move stuff');
          if (touches && touches.length) {
              startX = touches[0].pageX;
              startY = touches[0].pageY;
              $this.bind('touchmove', touchmove);
            }
            event.preventDefault();
      }
 }
wallride commented 10 years ago

How about this? I've managed to make links clickable. But it works only when onClick event is set. Still working on it.

    function touchstart(event) {
      var touches = event.originalEvent.touches;
      var touchedObject = touches[0].target;
      if (touchedObject.nodeName=='A'){
          $(touchedObject).click();
          event.preventDefault();
          return 0;
      }
      if(!(
            typeof($._data(touchedObject, "events")) !== 'undefined' 
            && $._data(touchedObject, "events").click != null
            || touchedObject.nodeName == 'A'
        )){
        startX = touches[0].pageX;
        startY = touches[0].pageY;
        $this.bind('touchmove', touchmove);
      }
      event.preventDefault();
    }
wallride commented 10 years ago

Fixed!

    function touchstart(event) {
      var touches = event.originalEvent.touches;
      var touchedObject = touches[0].target;
      if (touchedObject.nodeName=='A'){
          $(touchedObject).click();
          return 1;
      }
      if(!(
            typeof($._data(touchedObject, "events")) !== 'undefined' 
            && $._data(touchedObject, "events").click != null
            || touchedObject.nodeName == 'A'
        )){
        startX = touches[0].pageX;
        startY = touches[0].pageY;
        $this.bind('touchmove', touchmove);
      }
      event.preventDefault();
    }
develth commented 10 years ago

Works great, thanks! But only if the click event is on a 'A' node.

wallride commented 10 years ago

yes. i think we should check all the list of clickable items. I didn't test it with input or select tags. If it's problem, it can be solved the same way