onclick 阻止移动 Safari 上的复制+粘贴？答案

【问题标题】：onclick blocks copy+paste on Mobile Safari?onclick 阻止移动 Safari 上的复制+粘贴？
【发布时间】：2011-08-11 20:54:53
【问题描述】：

背景：我有一个下拉菜单，其工作原理与this other Mobile Safari Event Issue question 中描述的基本相同：单击菜单项以显示下拉菜单，再次单击菜单项或单击其他任何位置在页面上隐藏菜单。隐藏下拉列表的 jQuery 绑定到跨越整个窗口的父 <div> 的单击事件。此下拉菜单在所有浏览器（包括 Mobile Safari）中都可以正常工作，我只是为了上下文而在此进行描述。

问题：此 onclick 事件会阻止 Mobile Safari 上的用户（在 iPod Touch 4.2.1 和 iPad 4.3.5 上测试）获得正常的长按 Copy |将弹出窗口粘贴到我们网站的任何位置。哦！根据我的研究，如果一个 HTML 元素定义了一个点击处理程序，它所包含的内容似乎是不可复制的？

我在这里设置了一个精简的演示（更新：我在这个演示中使用直接的 JavaScript 来说明这不是 jQuery 问题，但这无法与 jQuery 的 . click() 也是）：http://adamnorwood.com/ios-copypaste.html

如果您在 Mobile Safari 中打开该链接，您应该无法复制 lorem ipsum 文本，但是当您单击文本时会通过 console.log() 收到一条消息，以证明单击处理程序是开火。

这是它的要点，以防链接断开：

<div id="content">Imagine a large block of text here...</div>
<script>
    document.getElementById('content').onclick = function() { 
        console.log('You just clicked me!'); 
    }
</script>

我尝试过的事情：

-webkit-user-select: text 为described here
使用 onmouseup 和其他事件而不是 onclick（不）。
将 onclick 移动到 <body> 标记或窗口对象
iOS Handling Events documentation 中的图 6-4 是相关的，但并没有让我得到关于该做什么的任何重大启示......

有什么想法吗？这是它应该工作的方式，还是我错过了什么？有没有办法让这个文本可选，但仍然触发点击处理程序？或者也许我应该回到绘图板上，了解如何最好地隐藏下拉菜单，以便完全避免这个问题？

【问题讨论】：

如果您使用事件委托，这个问题尤其严重。比如说，如果你要使用 jquery 的 $('body').delegate(".myclickable', "click", function () {...})，那么整个页面上的文本都不能在iOS。我的解决方法是低效地为我关心的每个链接添加点击处理程序（也在混合文本和链接下拉菜单中）。

标签： javascript jquery iphone ios mobile-safari

【解决方案1】：

啊哈，在把这个问题搁置了几个星期之后，突然想到了一个解决方案（至少乍一看似乎可行）。 Mobile Safari 可以更好地利用 touchstart 事件处理程序，而不是使用 .onclick()（或 jQuery 的 .click()）：

<div id="content">Imagine a large block of text here...</div>
<script>
    document.addEventListener('touchstart', function () {
        console.log('Yay, you clicked the text, and you can still copy-and-paste!');
    }, false);
</script>

使用此代码，我的示例案例中的下拉菜单可以通过单击文档上的其他任何位置来隐藏，并且我仍然可以访问标准的 iOS Copy |按住文本时粘贴气泡（所需的正常行为）。移动 Safari 获得“touchstart”侦听器，其他浏览器获得“onclick”。我不喜欢放置这种浏览器嗅探，但它解决了这个问题。除非有理由将此作为 touchstart 事件进行侦听存在问题，否则我会将其标记为已回答。

【讨论】：

这行得通，但是缺点是当用户在页面上滚动时您将关闭菜单（也许是为了访问他们看不到的菜单的一部分），或者放大/缩小（也许可以更好地看到菜单的其余部分）。理想情况下，这些手势不会导致菜单关闭。话虽如此，我也没有找到更好的方法。
事件 'mousedown' 也会破坏复制/粘贴菜单。它的替代品是什么？

【解决方案2】：

你试过 jQuery 吗？ jQuery 似乎适用于我在 Mobile Safari 中的网站。

这是一个你可以尝试的 jQuery 代码：

<div id="content">Imagine a large block of text here...</div>
<script type="text/javascript">
    $('#content').click(function() { 
        console.log('You just clicked me!'); 
    });
</script>

如果还没有，请确保在 <head></head> 标签中包含指向 jQuery 文件的链接。

我也在我的 iPhone 上尝试了你的例子，你是对的，它不会复制它，只是在我按住手指时突出显示它：

但是，jQuery 方式可能可行。

【讨论】：

感谢您的测试！我应该更清楚地说明我已经用 jQuery 的 .click() 以及直接的 JavaScript 测试了这一点（无论如何，AFAIK 应该同样工作）——我已经更新了我的问题以反映这一点。
没问题。似乎 onclick 出于某种原因使其成为可点击的链接。也许Mobile Safari 认为当你添加onclick 时，它应该是一个链接。