Question

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

问题：此onclick事件阻止Mobile Safari上的用户（在iPod Touch 4.2.1和iPad 4.3.5上测试）获得正常的触摸保持复制。在我们的网站上粘贴弹出窗口。 D'哦！根据我的研究，似乎如果HTML元素定义了一个点击处理程序，其包含的内容将不可复制？

我在这里设置了一个精简版演示（更新：我在这个演示中使用直接JavaScript来说明它不是jQuery问题，但是这不能用于jQuery。点击（）以及：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（nope）。
将onclick移动到<body>标签或窗口对象
iOS Handling Events documentation中的图6-4是相关的，但没有让我知道该怎么做...

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

Answer 1

啊哈，把这个问题放在远处的燃烧器上几个星期之后，突然想起了一个解决方案（至少这看起来似乎在第一眼就能发挥作用）。而不是使用.onclick()（或jQuery的.click()），Mobile Safari可以更好地利用 touchstart 事件处理程序：

<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'。我不喜欢让这种浏览器嗅探到位，但它解决了这个问题。除非有理由认为这是一个触控启动事件是一个问题，否则我会将其标记为已回答。

Answer 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上尝试了你的例子，你说得对，它没有复制它只是当我用手指按住它时突出显示它：

iPhone screenshot

但是，jQuery方式可能有用。

onclick在Mobile Safari上阻止复制+粘贴？

2 个答案: