モバイルSafari - JavaScriptのクリックイベントによってコピーアンドペーストが中断される

Question

モバイルイベントのいずれかの要素にクリックイベントをバインドすると、コピー＆ペーストが防止されます。

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

これは、モバイルを使用してテキストをコピーしてみてください、あなたが問題のデモについて本文など親要素...

からイベントを委任している場合は特に、私には、このような大規模なバグのように思えますこのデモ内のサファリ（iPhoneやiPad）：http://jsbin.com/ikileb/1/

注：あなたが身体からイベントを委任場合は罰金のように見えるが、それはDOM -webkit-tap-highlight-color内の他の要素から委譲だ場合に適用し、コピー＆ペーストがあるさ要素全体の中で阻止される。

Answer 1

いいえ、唯一の方法は、クリック可能なボタンを追加するなど、UXの動作を変更することです。あなたはG + for mobileをチェックアウトすることができます。

Answer 2

私は同じ問題を抱えていましたが、この解決策にはいくつかのjQueryが必要です。

私が提供する例は、伝統的なキーボード/マウスを使用するより複雑な例です。しかし、タッチデバイスの場合は、左クリックの部分に従ってください。左クリック、右クリックで選択する

左クリックドラッグでコピーを可能にし、（まだ貼り付ける新しいウィンドウでリンクが表示されます

同じウィンドウにリンクが表示されます

Safariの詳細については100％確信はありませんが、これは現代のすべてのブラウザでは一般的に機能するはずです。このシナリオでは、デスクトップユーザーはコピー/ペーストのキーストロークを使用します。ここで

は、アクセスに私が欲しいのリンクテーブルです：

<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> 

ここmousedownとmouseup結合を処理するためのjQueryの現在のバージョンを使用してスクリプトです：

<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>