0

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.

sonjz
  • 4,870
  • 3
  • 42
  • 60

3 Answers3

0

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>
sonjz
  • 4,870
  • 3
  • 42
  • 60
  • 1
    typo in your 2nd event, should probably be mouseup. also, i wouldn't use window.location.href to redirect in this case, instead just let the normal event succeed. – Kevin B Oct 24 '13 at 19:37
  • Oh, nvm this isnt an anchor tag. I would make it an anchor tag though, that way you get the default functionality of middle click opening in a new window. – Kevin B Oct 24 '13 at 19:38
  • @KevinB thanks for the typo correction. This example is focused on using the click event, as anchors aren't always possible, i.e. in this example of an entire real-estate of a row. – sonjz Oct 24 '13 at 20:06
0

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/

FiLeVeR10
  • 2,155
  • 1
  • 12
  • 13
  • or they might have not finished moving the mouse when they did mousedown. the +-5px isn't a bad idea to ensure that the intent was a click rather than a drag – Kevin B Oct 24 '13 at 20:18
  • it's rare the mouse is moved mid-click, since the action itself takes a fraction of a second, and I've never run into any application where that was the case. Though you could certainly record x and y separately and give it a 5 mfe if you wanted to. Just add two extra vars, record them separately then compare the x and y values against themselves instead of seeing if they are equal. – FiLeVeR10 Oct 24 '13 at 20:53
-2

If you are looking for a quick answer.

Give a instruction line:

Please use Mouse to select and copy the URL.

Rana blogs
  • 42
  • 1