How can I enable pinch zooming after calling preventDefault();?

Hi Joel,

Thank you so much for taking the time to put that sample together for me! I really appreciate it. It does work on iOS and on my desktop.

However, when I test in Safari on my iPad (iOS v8.1.1) and in Chrome's (most recent version, 40.0.2214.111) mobile emulator, the mouseDown event (changing BG to red) doesn't occur.

So I set up a stripped-down sample project to show you what I am working on so you can see the issue I have. Basically the mouseOver/mouseEnter (I've tested with both) events create an extra tap when using on the iPad and on the iPhone (iOS v7). I placed a console.log in the mouseEnter/mouseOver events and the mouseLeave/mouseOut events to track them. The mouseLeave/mouseOut events do fire if you tap/click outside of an interactive element.

Dropbox - sample_touchless.zip

I am hoping you can take a look and suggest how I can re-work my touch and mouse events so that a single tap on an element performs just the click behavior on the iPad, while still maintaining the mouseOver effect for PCs.

Thank you!

Melanie

Ah, that explains it. I thought you were subtly trying to tell me that I didn't need touch events if I set up the mouse events correctly :-)

The updated sample works as expected. Although if you tap too quickly, the built-in delay in firing the click event causes it to miss numbers: if you tap, say, 1 2 3 4 5 in relatively quick succession, it only registers 1 3 5...putting the click behaviors on touchEnd could potentially fix that, but then of course you have to make sure the click event is not also fired.

As you will see in my project, the mouseOver/mouseOut events are the ones causing the extra taps and undesired behavior. They are a requirement of the project. If there isn't a way to combine events so that both touch and mouse events can work together happily, I am open to a solution that tests for touching vs. mouse and then executes the associated events...

Thanks again for all the assistance, I really appreciate it - I've been struggling with this for longer than I care to admit.

Hi joel_pau,

Thank you for what you have done with this so far! It looks like a much better way to do what I was trying to do, even without the events.

Looking forward to step #2!

Thank you!!

This is where I am struggling. The user should not tap twice to select a dot on touch screens.

So:

On touch screens I want it to execute the click behavior on one tap, ignoring the mouseOver.

On desktops there should be a mouseOver effect and the click behavior.

mouseOver effect: label appears next to dot

click effect: loads associated text into text fields on the left, the label next to the dot remains, and the active dot highlights.

For the highlight the dot can just change to white for now - I will work on that, I have to change all the colors anyway so I wouldn't want you to spend time on it.

The problem I keep having is the "ghost" click on touch screens: sometimes the mouseOver event will fire, causing the double tap or a label appearing for a dot that isn't the active dot. Again, I am super grateful for your help!

I haven't exactly found the answer to my original question, but it is more a result of the question itself rather than the fantastic community assistance provided here.

My issue was that my project was firing mouseOver/mouseEnter/mouseLeave/mouseOut events on the iPad and iPhone (iOS 7.x and 8.x) when not desired. The interactive/clickable elements - dots - in my project are supposed to have mouseEnter/mouseOver behavior on the desktop but not on iOS touch devices.

The mouseEnter events usually fired in a specific case: if a finger touched more than one dot at the same time. Due to the small size of the dots, this could happen frequently depending on the user.

What I tried that didn't work:

• Calling e.preventDefault() on every possible touch event, on the dots and on the stage, but still mouse events fired occasionally.
• Using a timer to detect touches and subsequently ignore mouse events for a period of time, on the dots and on the stage, but sometimes touch events were not picked up by iOS so this was unreliable.
• Banging my head repeatedly against my desk and other hard surfaces.
• Multiple combinations of the above methods.

The closest I could get to canceling out the occasionally-fired mouseEnter/mouseOver events was to call e.preventDefault() in document.compositionReady. But that introduced other unacceptable behaviors and resulted in my slightly misguided question.

Joel_pau's help was instrumental in guiding me to my ultimate solution, so I am marking his response correct - I hope his sample proves useful to others as well. It also showed me how to streamline my code and make it more efficient and extensible.

What eventually worked for me, using a combination of methods including some from joel_pau's sample:

• Check for iOS (iPhone, iPad, iPod) - in my particular situation this is sufficient to cover the user base's needs for the time being, although I may need to add checks for additional devices or features sometime in the future.
• Bind both touchstart and click events together; in my case they perform the same behavior.
• Use setTimeout() within the touchstart-click events to prevent them from firing twice.
• In mouseEnter/mouseOver events, perform iOS check and prevent mouse events if true - this also prevents the mouse event it is bound in, which was not a logical conclusion for me and why I hadn't already tried it

var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);


// flag variable used in setTimeout(), initially set to false
var flag = false;


sym.$('mySymbol').bind('touchstart click', function () {
  if (!flag) {
       flag = true;
       setTimeout(function () {
            flag = false;
       }, 300);
       // perform touchstart/click actions here
  }
  return false;
});


sym.$('mySymbol').bind('mouseenter', function () {
  if (iOS) { // events for iOS devices only - prevent mouse events
       e.preventDefault();
  } else { // events for everything else
       // perform mouseEnter actions here
  }
});

This might not be a solution that works for anyone else, but hopefully at least one of you can learn from it and maybe even save yourself from actions resulting in head trauma.

Thanks again joel_pau!! I owe you a beer.