Mobile Safari - JavaScript click breaks разбивает и вставляет

Question

Когда вы связываете событие щелчка с любым элементом в Mobile Safari, копирование и вставка запрещены, кто-нибудь знает обходной путь для этого!?

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

Это кажется мне такой большой ошибкой, особенно если вы делегируете события от родительского элемента, такого как body ...

Для демонстрации проблемы попробуйте скопировать текст с помощью мобильного сафари (iPhone или iPad) в этой демонстрации: http://jsbin.com/ikileb/1/

ПРИМЕЧАНИЕ: кажется, что все в порядке, если вы делегируете событие из тела, но если оно делегировано из любого другого элемента в DOM, применяется -webkit-tap-highlight-color, а копирование и вставка запрещены во всем элементе.

Answer 1

У меня была та же проблема, это решение требует некоторого jQuery.

Пример, который я привожу, является более сложным примером с использованием традиционной клавиатуры / мыши.Но для сенсорных устройств просто следуйте частям левой кнопки мыши.

1. щелчок левой кнопкой мыши вызовет ссылку в том же окне
2. нажатие правой кнопкой мыши вызовет ссылку вновое окно
3. перетаскивание левой кнопкой мыши для выбора позволяет копировать и вставлять еще (в моем сценарии пользователь рабочего стола использовал бы нажатие клавиши копирования / вставки, а не щелчок правой кнопкой мыши)

Не уверен на 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>

Answer 2

Нет, единственный способ - изменить поведение UX, например, добавить кнопку с возможностью нажатия. Вы можете проверить G + для мобильных устройств.