Question

我有一个附加到表行的click事件（可以是任何对象）：

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

<script>
    $(document).ready(function() {
       $(".row").click(function() {
           var href = $(this).find("td").html();
           window.location.href = href;
       }
    }
</script>

当我在该行上有一个点击事件时，一旦我开始左键单击并突出显示该文本，点击事件就会在用户有机会复制/粘贴之前触发。

如何让用户选择该行上的文字进行复制和粘贴？

注意：这个问题是教学性的，我将提供自己的答案。

Answer 1

答案在标签中。您已捕获mousedown和mouseup个事件。

首先捕获mousedown事件并存储状态。
接下来抓住mouseup事件并比较mousedown州的坐标。
如果鼠标在事件之间显着移动，请不要处理点击。

将以下脚本部分替换为：

<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").mouseup(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;
        }
        lastMouseDownEvent = null;
    });
});
</script>

Answer 2

比这更容易。

var down = '';
var up = '';
$('.row td').on('mousedown', function (e) {
    down = e.pageX+','+e.pageY;
}).on('mouseup', function (e) {
    up = e.pageX+','+e.pageY;
    if(up === down) {
        window.location.href = $(this).html();
    }
});

您可以向下捕捉鼠标位置，然后再向上捕捉鼠标位置。如果它们匹配，那么鼠标没有移动，它应该导致链接，如果没有，那么它们可能正在选择文本。

做了一个小提琴：http://jsfiddle.net/filever10/2fm23/

Answer 3

如果您正在寻找快速答案。

提供说明：

请使用鼠标选择并复制网址。

当我使用点击事件时如何仍然突出显示/复制/粘贴？

3 个答案: