Question

我有一个溢出：在容器中滚动img火车地图。我添加了一个脚本，允许用户单击并拖动地图以在其中导航。

img标有火车站的标签，用户可以点击它，然后将它们带到他们选择的火车站。

我的问题是，当用户点击地图进行拖动时，如果他们碰巧在尝试拖动时偶然点击其中一个工作站，浏览器会无意中将它们链接到工作站。

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

这是我从以下地方获得dragscroll脚本的地方：

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

Answer 1

您可能需要添加e.preventDefault（）;和/或e.stopPropagation（）;到你的mouseup事件处理程序。如果在不拖动的情况下突然点击工作站，则可能需要智能地计算用户拖动时鼠标移动的数量，如果超过某个阈值（20px），则会阻止默认/停止。

Answer 2

尝试在脚本中添加这样的内容。

// 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'));
});

如何在拖动时防止单击元素？

2 个答案: