How to prevent elements from being clicked while dragging?

Question

I have an overflow:scroll img of a train map in a container. I added a script to allow users to click and drag the map to navigate around it.

The img has tags mapped on the train stations so that users can click on it and it will lead them to the train station they choose.

My problem is when the user clicks on the map to drag around, the browser will link them to a station unintentionally if they happen to click on one of the stations by accident when trying to drag.

<script>
    //-----------This script allows the user to drag scroll---------------
    (function ($) {
        $.fn.dragScroll = function (options) {
            /* Mouse dragg scroll */
            var x, y, top, left, down;
            var $scrollArea = $(this);

            $($scrollArea).attr("onselectstart", "return false;");   // Disable text selection in IE8

            $($scrollArea).mousedown(function (e) {
                e.preventDefault();
                down = true;
                x = e.pageX;
                y = e.pageY;
                top = $(this).scrollTop();
                left = $(this).scrollLeft();


            });
            $($scrollArea).mouseleave(function (e) {
                down = false;
            });
            $("body").mousemove(function (e) {

                if (down) {
                    var newX = e.pageX;
                    var newY = e.pageY;
                    $($scrollArea).scrollTop(top - newY + y);
                    $($scrollArea).scrollLeft(left - newX + x);


               } 



            });
            $("body").mouseup(function (e) {                
                down = false; 
                console.log("released");
                $("area").click(function( event ){
                        return true;
                        });
            });
        };
    })(jQuery);           
</script>



<script>
    //-----------This script initiates the drag scrolling---------------
    $(document).ready(function() { 
        $('#container').dragScroll({});

    });
</script>

<!-- A snippet of <area> tags being plotted on the img map -->
<div class="parent">
                <div class="tube-container" id="container">

                    <img src="../../img/test-tube-map10.png" usemap="#map" class="map">
                    <!--The following code block maps out the coordinates on the map and links them to the selected tube train search-->
                    <map name="map">
<area shape="RECT" coords="3601,1431,3749,1464" href="javascript:pcfromflash('Abbey Road');" title="Abbey Road">
<area shape="RECT" coords="867,1720,968,1767" href="javascript:pcfromflash('Acton Central');" title="Acton Central">
<area shape="RECT" coords="2913,3586,3099,3617" href="javascript:pcfromflash('Addington Village');" title="Addington Village">
</map>

This is where i got the dragscroll script from:

https://github.com/jaclimer/JQuery-DraggScroll

So to be clear: the click event takes precedence prior to the dragstart event ? And is there an online demo of that jQuery plugin ? I only see the code on github. — bob.mazzo, Jan 23 '15 at 15:46
Might consider changing cursor for the selectable areas and don't initialize mousemove positioning if `event.target` is one of those elements. Hard to help more without a demo — charlietfl, Jan 23 '15 at 15:47
this related post might help. It deals with the distinction between onclick and startdrag - http://stackoverflow.com/questions/19931307/d3-differentiate-between-click-and-drag-for-an-element-which-has-a-drag-behavior — bob.mazzo, Jan 23 '15 at 15:53

score 0 · Answer 1 · answered Jan 23 '15 at 15:48

You might have to add either e.preventDefault(); and/or e.stopPropagation(); to your mouseup event handler. If this breaks clicking on the stations when not dragging then you may have to intelligently calculate the amount the mouse has moved while the user was dragging and if it is more than some threshold (20px) then you will preventDefault/stopProp.

score 0 · Answer 2 · answered Jan 23 '15 at 15:57

Try adding something like this to your script.

// stop area tags from redirecting if clicked
$('area').on('click', function(e) {
    e.preventDefault();
});
// redirect when mouse is released on an area tag
$('area').on('mouseup', function() {
    window.open($(this).attr('href'));
});

How to prevent elements from being clicked while dragging?

2 Answers2