How to still highlight / copy / paste when I'm using a click event?

Question

I have a click event attached to a table row (could be any object):

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

When I have a click event on the row, once I start to left-click and highlight the text, the click event fires before the user has a chance to copy/paste.

How do I still allow the user to select text on that row for copy and pasting?

NOTE: This question is instructional, I'll be providing my own answer.

Answer 1

The answer is in the tags. You have capture the mousedown and mouseup events.

1. First catch the mousedown event and store the state.
2. Next catch the mouseup event and compare the coordinates of with the mousedown state.
3. If the mouse has moved significantly between events, don't process the click.

Replace the above script section as follows:

<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

It's much easier than that.

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();
    }
});

You catch the mouse position on down, and again on up. if they match, then the mouse hasn't moved and it should result in the link, if not then they're probably selecting text.

made a fiddle: http://jsfiddle.net/filever10/2fm23/

Answer 3

If you are looking for a quick answer.

Give a instruction line:

Please use Mouse to select and copy the URL.