Mobile Safari-JavaScript点击事件中断复制和粘贴

Mobile Safari - JavaScript click event breaks copy and paste

本文关键字：复制 中断 事件 Safari-JavaScript Mobile      更新时间：2023-09-26

当您将点击事件绑定到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，并防止在整个元素中复制和粘贴。

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

我遇到了同样的问题，这个解决方案需要一些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>
相关文章：