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

Groups > comp.lang.javascript > #7944 > unrolled thread

ontouch onclick and ios

Back to article view | Back to comp.lang.javascript

Contents

  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

#7944 — ontouch onclick and ios

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
- why preventDefault is needed

Andrew Poulos

[toc] | [next] | [standalone]

#7945

On 3/11/2011 4:11 PM, 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

To answer my own question it seems that preventing the default on a 
touch start event consumes (if that's the right term) the onclick event 
as well.

> - why preventDefault is needed

And prevent default stops swipes dragging the page about.

---

One new question though. If the current code uses onclick is there a way 
to have them all replaced/changed with ontouchstart without having to 
manually go through and edit the code?
So , for example,
  elem.onclick = a;
would become
  elem.ontouchstart = a;

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#7947

On Thu, 03 Nov 2011 18:02:50 +1100, Andrew Poulos wrote:

>To answer my own question it seems that preventing the default on a 
>touch start event consumes (if that's the right term) the onclick event 
>as well.
>
>> - why preventDefault is needed
>
>And prevent default stops swipes dragging the page about.

Aha.

>One new question though. If the current code uses onclick is there a way 
>to have them all replaced/changed with ontouchstart without having to 
>manually go through and edit the code?
>So , for example,
>  elem.onclick = a;
>would become
>  elem.ontouchstart = a;

Why not prevent the touchmove event instead? See here for more
information on touch events in Apple webkit:

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
( http://tinyurl.com/2dvhhjs )

See also here for some cross-browser information:

http://www.quirksmode.org/mobile/tableTouch.html
-- 
Ross McKay, Toronto, NSW Australia
"Let the laddie play wi the knife - he'll learn"
- The Wee Book of Calvin

[toc] | [prev] | [next] | [standalone]

#7946

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

[toc] | [prev] | [next] | [standalone]

#7950

On Nov 3, 1:11 am, Andrew Poulos <ap_p...@hotmail.com> wrote:
> I have this in a page
>
> function touchStart(event) {
>    event.preventDefault();
>
>    // more code here...
>
> }

If you use the attachTouchListeners function, you can just return
false.

>
> window.ontouchstart = touchStart;
>
> What I don't understand is:
> - why the preventDefault on line 2 also kills the onclick event on iOS

That's just how it is designed.

> - why preventDefault is needed
>

It isn't unless you are doing drag and drop or some such thing. In
that case, you can either check the target (in touchstart/mousedown
callback) and exclude elements that activate (e.g. links) from touch
drag manipulation or you can prevent the default for clicks and figure
out when the touch equivalent has occurred (i.e. touch starts and end
without moving past a certain threshold). This is the "tap" pseudo
event that various frameworks have been trying to get right for years.
Key is in intelligent handling (based on recent touch activity) of the
click events. Unfortunately, every design attempt I've seen so far
fails to account for clicks properly. :(

I started on a separate attachTapListeners function at one point, but
stopped when I realized I had to combine it with attachTouchListeners
to get any sort of realistic GP solution. Sorry, but I have to leave
that one as an exercise for now.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web