How do I prevent touchend event from apparently being "remembered" by the browser and firing subsequently at inappropriate times?

EDIT

Based on the number of views and the complete lack of responses I have to assume that I did a poor job of communicating my issue. I'm going to try to rectify that now.

I extended the HTMLElement prototype with a new tap method like so:

HTMLElement.prototype.tap = function (func) {
    this.addEventListener("touchend", func, false);
};

I also created a custom tap event in jQuery:

$(document).delegate("*", "touchend", function (e) {
    $(this).trigger("tap");
});

I also created a jQuery plugin called tap:

$.fn.tap = function (func) {
    this.bind("tap", func);
};

If I try to use any of these with a callback function that includes an alert statement the callback executes twice. I tap the element to pop up the alert. I tap the "OK" button in the alert to close it. The next time I tap the screen no matter how long I wait the alert pops up again. This time tapping the "OK" button doesn't seem to set up another repeat.

H开发者_开发技巧owever if the callback function doesn't include an alert statement (e.g. I use a console.log statement instead) the callback only executes the one time.

Does anyone know a way to deal with this? I'm about to try unhooking the event handler from within itself and then rebinding it afterwards, but that's nothing more than a hack if it's even successful.

I'd rather do things the "right" way. :-)

ORIGINAL

I just finished writing a "tap" function that I can use by extending the HTMLElement or Element prototypes as well as a custom "tap" event and "tap" plugin both for jQuery. I thought I had this in the bag until I decided to use a simple alert statement as test code.

When I use these with some element on my test page, they fire properly when I first "tap" the element, but the problem arises after I touch the alert's "OK" button and then, any amount of time later, tap the screen again at which point the event handler fires a second time.

At first I thought it was my custom code, but when I tried it with the following very basic JavaScript I was able to replicate the exact same issue.

document.getElementById("some-element").ontouchend = function (e) {
    alert("Howdy doody!");
};

I imagine it must have something to do with the fact that I have to touch the screen again to execute the "OK" on the alert while still technically "inside" the event handler (since the alert is in effect "blocking" the completion of the handler function).

The fact that the behavior isn't replicated with the following slightly different code seems to support my imagination. :-)

document.getElementById("some-element").ontouchend = function (e) {
    console.log("Howdy doody!");
};

If I include the above code in a page and touch that element after the callback fires I won't get a repeated firing of that callback function as opposed to the previous block of code where I'll see the alert pop up a second time the next time I tap the screen after hitting "OK" no matter where on the page I tap.

A strange issue indeed, and I haven't been able to find any information about why this might be happening. Does anyone have an idea what is happening?

I believe the visual, full-page alert being triggered on touch end is interfering with the touch event cycle. Try to call the alert after yielding to the DOM. eg.

setTimeout(function() {
    alert('btn clicked');
}, 0);