Polymer 1.0 Unable to stop on-tap event propagation

Question

I have a paper-button with the on-tap function that opens a paper-dialog that contains a "Accept" paper-button that will close it when clicked.

The problem i'm getting is if depending on my screen resolution, and the dialog's "Accept" button is over the initial button to open the dialog, when clicked, the dialog opens and closes. I'm assuming the on-tap event is being fired to both.

I've tried these 2 methods but they do not seem to help.

event.cancelBubble = true;
event.stopPropagation();

Midpoint

If i use the on-click to call my function, this does not happen. But I'm still looking for a way to stop the event propagation from happening. – Midpoint

event.stopPropagation(); on the callBack(e) from #95 in github.com/PolymerLabs/more-routing/blob/master/demo/… – Cammack

I had a situation where a I called event.stopPropagation on a Polymer tap event but it still caused a nearby link ("<a href... >") to be activated and followed. It turns out this is correct behaviour because the two events are unrelated - the tap event and the link follow. The tap event was, in fact, being stopped but the independence of the two actions confused me. Something similar may be happening in this case. Be sure the even you are seeing is indeed the propagated tap event and not something else. – Dougall

Yes i suspect the event is not related. I've already tried event.stopPropagation(); and it does not work. Cause it only happens in certain conditions. When my overlaying dialog's close button overlays the button "Open" that opens it. As soon as it opens, it closes. Thus I concluded that the tap event is somehow firing to both buttons. – Midpoint

To get around it, I tried 2 methods that worked, 1: Using on-click to open the dialog. 2: using Async to delay the opening of the dialog by at least 10-20ms, this somehow prevents the "Close" button from receiving the tap event (I'm guessing that the dom isn't added to view yet that's why it isn't getting it). I'm not sure which is the best method, I'm reading that I should be using on-tap for better mobile experiences. – Midpoint

event.stopPropagation() works for me. I just have to put it at the end of the event of the first event to prevent the propagation to the second event. I am not exactly sure about your situation because I can't see code. – Crossways

Answer 1

The problem is that a capacitive screens or even mouses can generate multiple tap event on the same spot within a few milisec.

• The mouses because a quick change in a high and low voltage (logical 1 and 0) generating an AC signal wich can jump trough on a capacitator (which can be the button two contactor between the air) if the conditions matching. But the onclick event is already catching this case and you does not require to do anything to solve it.

• The capacitve screens are capacitators and just rolling your finger should trigger multiple tap events because your skin has different depth of insulation and hard to mark the tap begin and end in some cases.

This physical problem should be solved by the platform, but it is not in every situation currently (but most of the devices are filtering this). Im usally solving this isse with a transparent overlay element wich can catch the pointer events for a little duration so I could catch the "prelling" of a button or the capacitive screen for a few ms.

If a 10-20ms is enough for you then wait a frame in your on-tap function with requestAnimationFrame and then show the dialog. Cheap trick, but it does what it has to, but ultimately you can wait a fix timeout to show the dialog, because you have 100ms to respond a user interaction.

You cannot fix this by manipulating the browser events options though because as I know you dont have option to how much time need to pass until the next same event should happend. But if you wait a frame thats could behave like you add a delay between the events.

Homograft