locked
metro javaScript :How to drag the screen scrolling by pressing and hold on the div . But didn't trigger Click events ?

    Question

  • hi guys~

    I created a  "<div></div>"  in a horizontally scrolling container and add a Click event listener on this div.

    But When I press and hold on the div to drag the screen scrolling. It will trigger Click events But I just want  to scroll the screen.

    How to drag the screen scrolling by pressing and hold on the div . But didn't trigger Click events ?


    Tuesday, May 29, 2012 10:03 AM

Answers

  • You could handle the gesture yourself:

                var DELTA = 10;
                var recognizer = new Windows.UI.Input.GestureRecognizer();
                recognizer.gestureSettings = 64;
                document.querySelector('.myDivClass').addEventListener('MSPointerDown', function (data) {
                    recognizer.processDownEvent(Windows.UI.Input.PointerPoint.getCurrentPoint(data.pointerId));
                });
                document.querySelector('.myDivClass').addEventListener('MSPointerUp', function (data) {
                    recognizer.processUpEvent(Windows.UI.Input.PointerPoint.getCurrentPoint(data.pointerId));
                });
                document.querySelector('.myDivClass').addEventListener('MSPointerMove', function (data) {
                    recognizer.processMoveEvents(Windows.UI.Input.PointerPoint.getIntermediatePoints(data.pointerId));
                });
                recognizer.addEventListener('manipulationcompleted', function (args) {
                    var pt = args.cumulative.translation;
                    
                    if (pt.x < -DELTA) {
                        // scroll right
                    }
                    else if (pt.x > DELTA) {
                        // scroll left
                    }
                });

    -Jeff

    Jeff Sanders (MSFT)

    Tuesday, May 29, 2012 6:59 PM
    Moderator

All replies

  • You could handle the gesture yourself:

                var DELTA = 10;
                var recognizer = new Windows.UI.Input.GestureRecognizer();
                recognizer.gestureSettings = 64;
                document.querySelector('.myDivClass').addEventListener('MSPointerDown', function (data) {
                    recognizer.processDownEvent(Windows.UI.Input.PointerPoint.getCurrentPoint(data.pointerId));
                });
                document.querySelector('.myDivClass').addEventListener('MSPointerUp', function (data) {
                    recognizer.processUpEvent(Windows.UI.Input.PointerPoint.getCurrentPoint(data.pointerId));
                });
                document.querySelector('.myDivClass').addEventListener('MSPointerMove', function (data) {
                    recognizer.processMoveEvents(Windows.UI.Input.PointerPoint.getIntermediatePoints(data.pointerId));
                });
                recognizer.addEventListener('manipulationcompleted', function (args) {
                    var pt = args.cumulative.translation;
                    
                    if (pt.x < -DELTA) {
                        // scroll right
                    }
                    else if (pt.x > DELTA) {
                        // scroll left
                    }
                });

    -Jeff

    Jeff Sanders (MSFT)

    Tuesday, May 29, 2012 6:59 PM
    Moderator
  • You could handle the gesture yourself:

                var DELTA = 10;
                var recognizer = new Windows.UI.Input.GestureRecognizer();
                recognizer.gestureSettings = 64;
                document.querySelector('.myDivClass').addEventListener('MSPointerDown', function (data) {
                    recognizer.processDownEvent(Windows.UI.Input.PointerPoint.getCurrentPoint(data.pointerId));
                });
                document.querySelector('.myDivClass').addEventListener('MSPointerUp', function (data) {
                    recognizer.processUpEvent(Windows.UI.Input.PointerPoint.getCurrentPoint(data.pointerId));
                });
                document.querySelector('.myDivClass').addEventListener('MSPointerMove', function (data) {
                    recognizer.processMoveEvents(Windows.UI.Input.PointerPoint.getIntermediatePoints(data.pointerId));
                });
                recognizer.addEventListener('manipulationcompleted', function (args) {
                    var pt = args.cumulative.translation;
                    
                    if (pt.x < -DELTA) {
                        // scroll right
                    }
                    else if (pt.x > DELTA) {
                        // scroll left
                    }
                });

    -Jeff

    Jeff Sanders (MSFT)

    hi jpsanders~ thanks for you help me again~

    I have tried the aboved method  you give me,But It have some problem.

    I rewrote the some method you give me like this:

    recognizer.addEventListener('manipulationcompleted', function (args) {
                    var pt = args.cumulative.translation;

                    if (pt.x < -DELTA) {
                        // scroll right
                    }
                    else if (pt.x > DELTA) {
                        // scroll left
                    }
                    else if (-DELTA < pt.x && pt.x < DELTA)
                    {
                        // Here is the trigger event after the click
                    }
                });

    When I click the “div” with the mouse, It can't trigger the ” ManipulationCompleted  “ Events  ~

    and When When I click the “div” with the finger, It also can't trigger the ” ManipulationCompleted  “ Events  ~

    Do you think I wrote correct?

    thanks~


    Friday, June 1, 2012 3:33 AM
  • I cannot tell without seeing your HTML code as well.  Does your div class name match the class name you specified in the querySelector? 

    Jeff Sanders (MSFT)

    Friday, June 1, 2012 1:38 PM
    Moderator
  • hi Jeff~ I have solved the problem through the method of a kind of strange~ he he~

    thanks a lot~  :)

    and there is good news that our software will be on the Win8 market in Microsoft at once,Welcome to try it ~ he he~  ;)   the name of our software is "Lecture Hall"~
    • Edited by Sith Go Monday, June 11, 2012 10:00 AM
    Monday, June 11, 2012 9:45 AM