使用 preventDefault() 独立运行的 Web 应用程序 - 不适用于图像链接答案

【问题标题】：Web app using preventDefault() to behave as standalone - does not work with image links使用 preventDefault() 独立运行的 Web 应用程序 - 不适用于图像链接
【发布时间】：2013-03-05 05:39:53
【问题描述】：

我有一个网络应用程序，一旦用户将其添加到其设备的主屏幕上，我想将其显示为独立的。我一直在 iPhone 5 上进行测试。我使用元标记使其显示为 Web 应用程序，并使用一些 jQuery 来处理点击事件，将所有链接保持在独立设备中并防止它们启动 Mobile Safari。这一切都很好，很简单，直到我尝试将一些无聊的文本链接变成图像链接。 preventDefault() 操作似乎无法处理图像链接，并且总是返回“在此服务器上未找到请求的 URL /undefined。”，而文本链接和标准表单按钮工作得很好。这是学校合作项目的一部分，我们需要它有一个时髦的界面，图片链接是其中的重要组成部分。

这是我必须处理链接的简单 js：

$( document ).on(
    "click",
    "a",
    function( event ){
       event.preventDefault();  
       location.href = $( event.target ).attr( "href" );
    }
);

按钮 HTML 如下所示：

<div id="loginBtn"><a href="memberLogin.php"><img src="CSS images/0-btn1.png" width="224" height="113" /></a></div>

任何建议将不胜感激。

【问题讨论】：

在 iOS 中，事件在 body 处停止冒泡。无论如何，您不应该将事件侦听器附加到 document... 将委托处理程序尽可能靠近目标。
如果这是一件显而易见的事情，我深表歉意——我的工作是项目的 PHP/SQL 部分，但我现在正在帮助解决这方面的问题。如果我需要它来处理整个项目中的所有链接，我不应该将它附加到document?

标签： javascript jquery html iphone-standalone-web-app

【解决方案1】：

现在，使用图像而不是只有一个元素 a，而是使用两个元素 a 和 img。所以我认为这与event propagation 和 PreventDefault。实际上 preventDefault 仅阻止默认操作，但不会停止其传播。看看这些链接，它们一定会对你有所帮助。

【讨论】：

【解决方案2】：

某些事件从目标元素通过每个父节点冒泡，直到它们到达文档的顶部（或 iOS 中的正文） - 因此，如果您在文档级别处理它们，效率会非常低。委托事件处理程序适用于动态生成的内容，因此您可以在创建处理程序时将处理程序附加到 DOM 中最近的父级。在你的情况下（假设你的 a 标签不是动态生成的），你可以做 $('a').on(...)

您还需要使用 event.stopPropagation(); 来防止应用在保存到主屏幕后在移动 Safari 中打开。

【讨论】：

图片链接现在都可以使用了！不幸的是，它们在 Mobile Safari 中启动，这是我一开始就打算避免的。
您希望他们推出什么产品？你没有使用 Mobile Safari 吗？
从技术上讲，我是，但是一旦它被添加到主屏幕上，它应该不会在顶部和底部显示 Safari URL 栏和按钮栏 - 只是状态栏。该 js 停止了从该显示中断开的链接并在 Mobile Safari 中启动新页面，但它又回到了这样做。
对，尝试使用window.location = $(this).attr('href'); 而不是location.href。
它仍在启动 Mobile Safari。