onclick塊在移動Safari上覆制+粘貼？

背景：我有一個下拉菜單，基本上與this other Mobile Safari Event Issue question上描述的下拉菜單相同：單擊菜單項以顯示下拉菜單，或者再次單擊菜單項或單擊頁面上的任何其他位置以隱藏菜單。隱藏下拉列表的jQuery綁定到跨越整個窗口的父級<div>的單擊事件。此下拉菜單在所有瀏覽器（包括Mobile Safari）中都能正常工作，而且我只是爲了上下文而在此處描述它。onclick塊在移動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>

事情我已經嘗試：使用onmouseup

-webkit-user-select: text爲described here
和其他事件而不是onclick（不）。
的onclick移動到<body>標籤或窗口對象
圖6-4中iOS Handling Events documentation是相關的，但並沒有導致我做什麼什麼大的啓示......

有什麼想法？這是它應該工作的方式，還是我錯過了什麼？有沒有辦法使這個文本可選，但仍然點擊點擊處理程序？或者，也許我應該回到繪圖板，瞭解如何最好地隱藏下拉菜單，以便完全避免此問題？

來源

2011-08-11 Adam Norwood

如果使用事件委派，此問題尤其嚴重。例如，如果您要使用jquery的$（'body'）。委託（「。myclickable」，「click」，function（）{...}），則整個頁面上的任何文本都不能在文本中進行選擇iOS。我的解決方法是低效地將點擊處理程序添加到我關心的每個鏈接中（同樣在混合文本和鏈接下拉菜單中） –

阿哈，在把這個問題放在了幾個星期後，突然想到了一個修復（至少這似乎乍看起來）。除了使用.onclick()（或jQuery的.click()）達到這一目的，移動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 |在文本上按下並按住時粘貼氣泡（所需的正常行爲）。 Mobile Safari獲得'touchstart'偵聽器，其他瀏覽器獲得'onclick'。我不喜歡把這種瀏覽器嗅探到位，但它解決了這個問題。除非有理由認爲這是觸發事件是一個問題，否則我會將其標記爲答案。

來源

2011-08-31 21:34:42

這可行，但不利的一面是當用戶在頁面上滾動時可能會關閉菜單（可能訪問否則就無法看到你的菜單的一部分），或放大/縮小（也許看到更好的t他剩下的菜單）。理想情況下，這些手勢不會導致菜單被關閉。這就是說，我還沒有找到更好的方法來做到這一點。 – avernet

事件'mousedown'也打破了複製/粘貼菜單。什麼是替代它？ – Dmitry

你試過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>

確保您在您的<head></head>標籤鏈接到jQuery的文件，如果您還沒有。

而且我想在我的iPhone的例子，你是對的它不會複製它只是強調了它，當我拿着我的手指放在上面：

iPhone screenshot

但是，jQuery的方式可能工作。

來源

2011-08-11 21:00:53 Nathan

感謝您對它進行測試！我應該更清楚地說明我測試過了無論是jQuery的.click（）還是直接的JavaScript（AFAIK，這些應該都是一樣的） - 我已經更新了我的問題來反映這個問題。 –

沒問題。看起來onclick好像是可點擊的鏈接出於某種原因，也許Mobile Safari認爲當你添加onclick時，它應該是一個鏈接 – Nathan

onclick塊在移動Safari上覆制+粘貼？

回答

相關問題