Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]


Groups > comp.lang.javascript > #7946

Re: ontouch onclick and ios

From Ross McKay <au.org.zeta.at.rosko@invalid.invalid>
Newsgroups comp.lang.javascript
Subject Re: ontouch onclick and ios
Message-ID <0td4b75chg7mgadj34lqbaj2e433gj6cmo@4ax.com> (permalink)
References <c86dneOQb4QFvy_TnZ2dnUVZ_j-dnZ2d@westnet.com.au>
Organization EasyNews, UseNet made Easy!
Date 2011-11-03 18:05 +1100

Show all headers | View raw


On Thu, 03 Nov 2011 16:11:40 +1100, Andrew Poulos wrote:

>I have this in a page
>
>function touchStart(event) {
>   event.preventDefault();
>
>   // more code here...
>}
>
>window.ontouchstart = touchStart;
>
>What I don't understand is:
>- why the preventDefault on line 2 also kills the onclick event on iOS

There is no click when you touch an element, but after you touch (i.e.
touchStart followed by touchRelease) the browser generates a click event
so that touches have the same effect as mouse clicks, when that is
appropriate.

>- why preventDefault is needed

I don't know what your code is doing exactly, but this is often used for
allowing you to touch a menu that normally drops down on hover, so that
you can drop down the menu without it generating a click event and thus
activating the link in the menu. Albeit, it would probably be better to
only prevent the click on first touch, e.g. (assuming dropdowns is a
collection of menu links with child menus):

function menuTouch(event) {
    // toggle flag for preventing click for this link
    var i, len, noclick = !(this.dataNoclick);

    // reset flag on all links
    for (i = 0, len = dropdowns.length; i < len; ++i) {
        dropdowns[i].dataNoclick = false;
    }

    // set new flag value and focus on dropdown menu
    this.dataNoclick = noclick;
    this.focus();
}

function menuClick(event) {
    // if click isn't wanted, prevent it
    if (this.dataNoclick) {
        event.preventDefault();
    }
}

for (i = 0, len = dropdowns.length; i < len; ++i) {
    element = dropdowns[i];
    element.dataNoclick = false;
    element.addEventListener("touchstart", menuTouch, false);
    element.addEventListener("click", menuClick, false);
}

Of course, designing the website to not require such manoeuvres would be
even better :)
-- 
Ross McKay, Toronto, NSW Australia
"The chief cause of problems is solutions" -Eric Sevareid

Back to comp.lang.javascript | Previous | NextPrevious in thread | Next in thread | Find similar | Unroll thread


Thread

ontouch onclick and ios Andrew Poulos <ap_prog@hotmail.com> - 2011-11-03 16:11 +1100
  Re: ontouch onclick and ios Andrew Poulos <ap_prog@hotmail.com> - 2011-11-03 18:02 +1100
    Re: ontouch onclick and ios Ross McKay <au.org.zeta.at.rosko@invalid.invalid> - 2011-11-03 18:15 +1100
  Re: ontouch onclick and ios Ross McKay <au.org.zeta.at.rosko@invalid.invalid> - 2011-11-03 18:05 +1100
  Re: ontouch onclick and ios David Mark <dmark.cinsoft@gmail.com> - 2011-11-03 07:37 -0700

csiph-web