移动 Safari - JavaScript 点击事件中断复制和粘贴答案

【问题标题】：Mobile Safari - JavaScript click event breaks copy and paste移动 Safari - JavaScript 点击事件中断复制和粘贴
【发布时间】：2012-01-31 23:15:24
【问题描述】：

当您将单击事件绑定到 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）委派事件...

如需演示该问题，请尝试在此演示中使用移动 Safari（iPhone 或 iPad）复制文本：http://jsbin.com/ikileb/1/

注意：如果您从主体委托事件似乎很好，但如果它是从 DOM 中的任何其他元素委托的，则应用 -webkit-tap-highlight-color 并防止在整个元素内复制和粘贴。

【问题讨论】：

我认为这不是一个真正的错误，但请查看上一个问题，他们在 addEventListener('touchstart'); 方面取得了成功
@Marcus - 不幸的是，touchstart 不是点击的有效替代品，因为它们的行为不同 - 最大的问题是 touchstart 无法区分点击和滚动手势，所以我仍然认为这是一个错误。
如果需要，您可以使用 touchstart+touchmove+touchend，并在 touchmove 上设置 swiping=true 标志以仅在点击时运行您的事件。作为旁注，Apple 文档正式将复制/剪切事件列为不受支持，所以你是对的 - 这可能是一个不容易修复的错误。见developer.apple.com/library/safari/#documentation/…
使用非内联JS方式绑定事件怎么样？喜欢 JQuery 方式$('span').click(function(){alert('Hey!');});?

标签： javascript html css mobile mobile-safari

【解决方案1】：

不，唯一的方法是改变你的用户体验行为，比如添加一个可点击的按钮。你可以查看 G+ 移动版。

【讨论】：

我不确定这与用户体验有何关系？

【解决方案2】：

我有同样的问题，这个解决方案需要一些 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>

【讨论】：