OnClick事件在iPhone Hybrid应用程序中发生了两次

Question

我正在开发一个iPhone Hybrid应用程序。因为我已经使用JavaScript插入了一个链接，并定义了在onclick事件上应调用的功能。

当我单击链接函数时，请调用并执行所需的操作，但是在此之后，如果我单击应用程序的主体中的任何地方，则再次调用相同的函数。

这两个链接都在我的应用程序中发生。

任何人都可以说发生了什么问题？

我写了一个函数，将图像添加为链接。代码如下：

// 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;

Answer 1

好的，因此您要设置onclick属性。现在，这在"传统" 平台上非常有效（具有鼠标般的设备，带有可用于单击对象的按钮）。触摸设备（名称为线索）没有此功能，而是通过触摸屏幕来操作。好的，您知道这一点，所以我认为您可以理解touch事件是极其过载（多触摸）。

触摸屏幕的第二个意味着与触摸屏幕拆分一秒钟完全不同的东西。您也可以用1、2、3或4个手指触摸屏幕。每次都应以不同的方式处理。
为了使事情变得更加复杂，您可以 drag 或 Swipe 在屏幕上也需要不同的处理。

幸运的是，我最近编写了一些代码将某些触摸事件映射到点击处理程序，使用封闭，绑定侦听器并在整个地方设置超时。因此，这可能会对您有所帮助：

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);
}

基本上，这是寄存器所有接触事件。要检查的第一件事是对用户触摸了感兴趣的要素，我想使用自定义活动处理程序来处理。如果没有，则返回该事件，什么也不会改变。
如果元素触摸很感兴趣，我将为该目标上的touchend事件创建一个侦听器。我还设置了一个超时，它将在.3秒后删除该侦听器（以防止泄漏）。如果touchend事件启动，请检查用户是否在原始元素上释放，如果不是在原始元素上，则将其解释为滑动，然后停止。
如果目标匹配，则在目标的上下文中调用点击处理程序，并且>传递事件对象！，以便调用stopPropagation()和/或preventDefault()方法。touchhandler还可以通过清除计时器并删除自身（再次：防止MEM泄漏）开始。
，这是一个非常非常基本的片段，可以使用更多的工作来完成

触摸事件包含更多信息（例如，您可以检查屏幕上有多少手指）。我也省略了我的原始代码，因为那会使它变得非常复杂且混乱（我在这里没有它，我真的不记得我如何处理某些情况）。但是，我可以告诉您，我倾向于检查e.clientX和e.clientY坐标，如果touchend事件在touchstart目标的50px之内，则无论如何，我还是将其映射到单击处理程序：提供一些 soft focus 于寒冷和发抖的人；）也可以浏览页面。

无论如何，看看对您有用的东西。但是有几个有用的链接：
触摸表
一些历史
一些触摸lib