onclick事件在iphone混合应用程序中发生两次 [英] onclick event is occuring two times in iphone hybrid app

问题描述

我正在开发iPhone混合应用程序。因为我已经使用javascript插入了一个链接，并定义了应该在onclick事件上调用的函数。

I am developing a iPhone Hybrid App. In that I have inserted a link using javascript and defined the function that should be called on "onclick" event.

当我点击链接函数被调用并且所需的操作是执行但之后，如果我点击应用程序正文中的任何位置，将再次调用相同的函数。

When I click the link function is called and required action is performed but after that if I click anywhere in the body of the app the same function is called again.

我的应用程序中出现的两个链接都会发生这种情况。

This is happening for both the two links present in my App.

任何人都可以说出发生了什么错误？

Can anyone tell what wrong is happening ?

我写了一个函数来添加图像作为链接。代码如下。

I have written a function to add an image as a link. code is given below.

// create a link for delete enquiry
var DelLink = document.createElement("a");

// setting the name of the link.
DelLink.setAttribute("name" , "DelButton"+pCurrentEnquiryID);

// image for the delete and its properties.
var DelImage = document.createElement("img");
DelImage.setAttribute("src","images/delete.png");
DelImage.setAttribute("height","30px");
DelImage.setAttribute("width","30px");

// append image to the link
DelLink.appendChild(DelImage);

//specifying onclick event of the link
DelLink.setAttribute("onclick","DeleteEnquiry(this)");
//DelLink.onclick = "DeleteEnquiry(this)";

return DelLink;

推荐答案

好的，所以你要设置 onclick 属性。现在，这在传统平台上非常有效（它具有类似鼠标的设备，其中的按钮可用于单击对象）。触摸设备（名称中的线索）没有这个，而是通过触摸屏幕来操作。好吧，你知道的，所以我认为你可以理解触摸事件极度超载（多点触控）。

Ok, so you're setting the onclick attribute. Now this works perfectly well on "traditional" platforms (that have a mouse-like device with buttons that can be used to click on objects). A touch device (clue is in the name) doesn't have this, instead it is operated by touching the screen. Allright, you knew that, so I take it you can understand that the touch event is extremely overloaded (multi-touch).

触摸屏幕一秒意味着与触摸屏幕一瞬间完全不同。您也可以用1,2,3或4个手指触摸屏幕。每次都要以不同的方式处理。
为了使事情变得更加复杂，你可以在屏幕上拖动或滑动，这也需要以不同的方式处理。

Touching the screen for a second means something completely different than touching the screen for a split second. You can also touch the screen with 1, 2, 3 or 4 fingers. Each time this is to be processed differently.
To make things even more complex, you can drag or swipe accross the screen, which needs to be handled differently, too.

幸运的是，我最近编写了一些代码来将某些触摸事件映射到点击处理程序，使用闭包，绑定侦听器和设置超时的地方。所以这可能对你有所帮助：

As luck would have it, I've recently written some code to map certain touch events to a click handler, using closures, binding listeners and setting timeouts all over the place. So this might help you on your way:

if ('ontouchstart' in window)
{//we have a touch device
    document.body.addEventListener('touchstart',function(e)
    {//handle all touch events on the body
        e = e || window.event;
        //not sure about all mobile browsers (win mobile)
        //so I'm playing it safe
        var target = e.target || e.srcElement;
        if (target.tagName.toLowerCase() !== 'a')
        {//didn't touch on a link
            return e;//stop
        }
        //touch must end after .3 seconds, otherwise user is zooming or something
        var timer = setTimeout(function()
        {
            target.removeEventListener('touchend',endHandler,false);//unbind after .3 seconds
            clearTimeout(timer);
        },300);
        var endHandler = function(e)
        {
            e = e || window.event;
            var endTarget = e.target || e.srcElement;//get element on which the touch ended
            clearTimeout(timer);//stop timer
            target.removeEventListener('touchend',endHandler,false);//remove listener
            if (endTarget !== target)
            {//user "swiped"
                return e;
            }
            //touch ended within .3 seconds, and ended on the same element, interpret this as click
            return clickHandlerFunction.apply(target,[e]);//invoke click handler with the target as context
        };
        target.addEventListener('touchend',endHandler,false);//bind touchend listener
    },false);
}

这基本上是注册所有 touchstart事件。正在检查的第一件事是用户触摸了感兴趣的元素，我想用自定义事件处理程序处理它。如果没有，则返回事件，没有任何变化。

如果感兴趣的元素，我在该目标上为 touchend 事件创建一个监听器。我还设置了一个超时，它将在.3秒后删除该侦听器（以防止泄漏）。如果 touchend 事件触发，请检查用户是否在原始元素上被释放，如果没有，请将其解释为滑动，然后停止。
如果目标匹配，在目标的上下文中调用click处理程序并传递事件对象！，这样就可以调用 stopPropagation（）和/或 preventDefault（）方法。 touchhandler 也可以通过清除计时器并自行删除（再次：防止内存泄漏）。
一如既往，这是一个真正的，非常基本的可以做更多工作的片段

What this does, basically, is register all touchstart events. The first thing that is being checked is did the user touch on an element of interest, one which I want to handle with my custom event handler. If not, the event is returned, nothing changes.
If the element touches is of interest, I create a listener for a touchend event on that target. I also set a timeout, which will remove that listener after .3 seconds (to prevent leaks). If the touchend event fires, check if the user was released on the original element, if not, interpret this as a swipe, and stop.
If the targets match, invoke the click handler, in the target's context and pass the event object! so you can invoke stopPropagation() and/or preventDefault() methods. The touchhandler also kicks off by clearing the timer and removes itself, too (again: to prevent mem leaks).
As ever, this is a really, really basic snippet that can do with a lot more work

触摸事件包含更多信息（例如，您可以检查触摸屏幕的手指数量）。我省略了一些我的原始代码，因为这会使它非常复杂而且凌乱（我在这里没有它，我真的不记得我是如何处理的某些情况）。但是，我可以告诉你，我倾向于检查 e.clientX 和 e.clientY 坐标，如果 touchend 事件在 touchstart 目标的50px范围内我将其映射到点击处理程序：提供一些柔和焦点适合寒冷和颤抖的人;）所以即使是因纽特人也可以浏览页面。

The touch events contain a lot more info (you can check how many fingers are touching the screen, for instance). I omitted a bit of my original code, too because that would have made it very complex and messy (and I don't have it here with me, and I can't really remember how I dealt with certain situations). I can tell you, however, that I tend to check the e.clientX and e.clientY coordinates, and if the touchend event was within 50px of the touchstart target I map it to the click handler anyway: to provide some soft focus for people who are cold and trembling ;) so even Inuit can browse the page.

无论如何，看看哪些对您有用。但有几个有用的链接：

触摸表

某些历史记录
一些触控库

Anyhow, see what works for you. A couple of useful links though:
Touch table
some history
some touch libs

这篇关于onclick事件在iphone混合应用程序中发生两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！