背景:I有一个下拉菜单,其工作方式与另一个Mobile事件问题上描述的基本相同:单击菜单项以显示下拉菜单,再次单击菜单项或单击页面上的其他任何位置以隐藏菜单。隐藏下拉列表的jQuery绑定到跨越整个窗口的父<div>的单击事件。这个下拉列表在所有浏览器(包括Mobile )中都能工作A-OK,我只是为了上下文而在这里描述它。
问题:这个onclick事件阻止用户在Mobile上(在iPod Touch 4.2.1和iPad 4.3.5上进行测试)无法获得我们站点上任何地方弹出的正常触摸和保持复制粘贴。哦哦!根据我的研究,如果HTML元素定义了单击处理程序,其包含的内容就不会是可复制的?
我在这里设置了一个精简的演示程序(Update:,我在这个演示中使用了直截了当的JavaScript来说明这不是一个jQuery问题,但这也不能用于jQuery的.click() ):http://adamnorwood.com/ios-copypaste.html
如果在Mobile中打开该链接,则不应该能够复制lorem文本,但是当您单击文本以证明单击处理程序正在启动时,您将通过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 as 在此描述<body>标记或窗口对象有什么想法吗?它应该是这样工作的,还是我遗漏了什么?是否有一种方法可以使这个文本可选,但仍然触发单击处理程序?或者我应该回到画板上,看看如何最好地隐藏下拉菜单,这样我就可以完全避免这个问题了?
发布于 2011-08-31 21:34:42
啊哈,在把这个问题搁置了几个星期之后,突然想到了一个解决办法(至少乍一看是这样的)。Mobile可以更好地利用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复制粘贴泡(所需的正常行为)。移动Safari获得“touchstart”监听器,其他浏览器获得“onclick”。我不喜欢把这种浏览器嗅探到位,但它解决了这个问题。除非有任何理由将此作为一个触屏事件进行侦听是个问题,否则我会将其标记为“回答”。
发布于 2011-08-11 21:00:53
你试过jQuery了吗?jQuery似乎在我的移动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>如果还没有,请确保将指向jQuery文件的链接包含在<head></head>标记中。
另外,我在我的iPhone上尝试了你的例子,你说得对,它不是复制的,只是当我把手指按在上面的时候突出显示出来:

但是,jQuery的方式可能会奏效。
https://stackoverflow.com/questions/7032710
复制相似问题