移動Safari - JavaScript單擊事件中斷複製和粘貼

當您將單擊事件綁定到Mobile Safari中的任何元素時，複製和粘貼都被阻止，是否有人知道解決此問題的方法！？移動Safari - JavaScript單擊事件中斷複製和粘貼

<span onclick="void(0);">This text cannot be cut or copied and a -webkit-tap-highlight-color style is automatically applied.</span>

這似乎是這樣一個巨大的錯誤給我，特別是如果你從父元素委託的事件，如身體...

有關問題的演示嘗試使用手機複製文本此演示中的safari（iPhone或iPad）：http://jsbin.com/ikileb/1/

注意：如果您從主體委託事件，但如果從DOM中的任何其他元素委派，則應用-webkit-tap-highlight-color，並且複製並粘貼爲在整個元素內阻止。

來源

2012-01-31 riscarrott

這不是一個真正的錯誤我想想，但看看這個先前的問題，他們在addEventListener（'touchstart'）成功的地方; – Marcus 2012-01-31 23:42:12

@Marcus - 不幸的是，touchstart並不是一種有效的點擊方式，因爲它們的行爲不同 - 最大的擔憂是touchstart沒有區分點擊和滾動手勢，所以我仍然認爲這是一個錯誤。 – riscarrott 2012-02-01 11:07:31

如果您需要，您可以使用touchstart + touchmove + touchend，並在touchmove上設置swiping = true標誌，以便僅在點擊時運行您的事件。作爲一個側面說明，Apple文檔正式將複製/剪切事件列爲不受支持的，所以您是對的 - 這可能是一個沒有簡單修復的錯誤。如何綁定事件中使用非內聯見http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1 – 2013-02-19 21:12:45

不，唯一的辦法就是改變你的UX行爲，就像添加一個可點擊的按鈕一樣。你可以查看G +的移動版。

來源

2013-02-20 05:25:10 unbuglee

我不確定這與UX有何關係？ – riscarrott 2013-02-21 09:54:52

我有同樣的問題，這個解決方案需要一些jQuery。

我提供的例子是使用傳統鍵盤/鼠標的更復雜的例子。但對於觸摸設備，只需按照左鍵單擊部分即可。

左鍵點擊會彈出一個鏈接在同一個窗口
右鍵會彈出一個鏈接在新窗口中
左鍵單擊拖動來選擇允許複製和粘貼仍然（在我的方案中，桌面用戶將使用他們的複製/粘貼按鍵，而不是右鍵單擊）

不能100％確定Safari的具體細節，但這通常適用於所有現代瀏覽器。

這裏是一個鏈接表我想訪問：

<table> 
<tr class="row"><td>http://google.com</td></tr> 
<tr class="row"><td>http://teslamotors.com</td></tr> 
<tr class="row"><td>http://solarcity.com</td></tr> 
</table>

下面是使用jQuery的最新版本來處理mousedown和腳本mouseup結合：

<script> 
$(document).ready(function() { 
    var lastMouseDownEvent = null; 

    // capture your last "mousedown" event and store it 
    $(".row").mousedown(function(event) { 
     console.log(event); // lets see the data in your Developer Mode log 
     lastMouseDownEvent = event; 
    }); 

    // catch the "mouseup" event and compare the distance from "mousedown" 
    $(".row").mousedown(function(event) { 
     console.log(event); 

     var href = $(this).find("td").html(); 
     switch(event.which) { 
      case 1: // left click 
       // only process left click if mousedown and mouseup occur at the same location on screen. 
       // NOTE: for my mom's shaky hand I added the 5 pixel allowance. 
       if (Math.abs(event.clientX-lastMouseDownEvent.clientX) < 5 && 
        Math.abs(event.clientY-lastMouseDownEvent.clientY < 5)) 
        window.location.href = href; 
       break; 
      case 2: // right click 
       window.open(href); 
       break; 
     } 
     lastMouseDownEvent = null; 
    }); 


}); 
</script>

來源

2013-10-24 19:14:27 sonjz

移動Safari - JavaScript單擊事件中斷複製和粘貼

回答

相關問題