locked
Touch and click event.

    Question

  • Hi.

    I've a little prevent with touch event.

    Here is my code

    <article id="test" style="-ms-user-select:text; -ms-touch-action: none;">Lorem ipsum irure minim <a href="/html/test.html">culpa</a> reprehenderit sed consectetur sed enim ad do tempor fugiat mollit. </article>

    With this code, the user can select a word on touch, and a touch on the link navigates to the page.

    But, in my windows store app

    1- I can't preventDefault() on MsPointerDown or MsPointerUp to disable link

    article.addEventListener("MSPointerDown", function(evt){
    evt.preventDefault();     // No effect on <a>
    }, false);
    
    article.addEventListener("MSPointerUp", function(evt){
    evt.preventDefault();     // No effect on <a>
    }, false);

    2- The following css has no effect to disable link

    a { pointer-events: none; }


    3- If I add a click listener to the article element, text-word selection on touch doesn't fire !

    article.addEventListener("click", function(evt){
    // selection of text doesn't fire anymore 
    });

    So how to disable link or how to fire text selection on click ?

    NB : in my article i've a lot of links.

    I can do the following

    WinJS.Utilities.query("a", article).listen("click", function(evt){
    evt.preventDefault()
    });
    
    

    But in my case, i've a lot of actions to do according to type of element, className etc.

        // Add a lot of events...
        WinJs.Utilities.query("a.sound", article).listen("click", function (evt)
        {
            evt.preventDefault();
            // do something
        });
    
        WinJs.Utilities.query("video", article).listen("click", function (evt)
        {
            evt.preventDefault();
            // do something
        });
    
        WinJs.Utilities.query("span.title", article).listen("click", function (evt)
        {
            // do something
        });
    
        ///////////////////////////////////////////////
        // An other approch : only one event 
        // and test according to the target
        // more perf and readable
    
        article.addEventListener("click", function (evt)
        {
            var elt = evt.target,
                tagName = elt.tagName.toLowerCase();
    
            if (tagName === "a" && elt.className === "sound")
            {
                evt.preventDefault();
                // do something
            }
            else if (tagName === "video")
            {
                evt.preventDefault();
                // do something
            }
            else if (tagName === "span" && elt.className === "title")
            {
                // do something
            }
        });


    Wednesday, November 14, 2012 4:28 PM

Answers

  • Here is how you do this:

    article.addEventListener("click", function (evt) { evt.preventDefault();

    // detect target and do stuff

    }, true);


    The 'true' above means to capture the event at the article level during the capturing phase before it arrives to the a element. This will fire for selection and the preventDefault will stop the link from navigating. If you want to custom handle link clicks you can then detect whether the evt.target is your link and if so, do whatever you please :).


    Tarek Ayna www.BluGraphingCalculator.com Blu Graphing Calculator is Calculator ReImagined for Windows 8

    Sunday, November 18, 2012 10:51 AM