-2

标题说明了一切。在提供拖动事件时，我遇到了问题。我尝试用 替换mousemove，mousedown可能会mousedown着火一次并安定下来，但它没有帮助。我怎样才能以编程方式做到这一点。

如果您想参考我要操作的代码，您可以参考此代码；否则忽略它：

<script>
$(document).ready(function () {

    $(".toolImage").mouseover(function () {
        $(this).parent(".toolTip").find(".toolTipDesc").css("display", "block");
    });
    $(".toolImage").mouseleave(function () {
        $(this).parent(".toolTip").find(".toolTipDesc").css("display", "none");
    });
    var native_width = 0;
    var native_height = 0;

    //Now the mousemove function
    $(".magnify").mousemove(function (e) {

        if (!native_width && !native_height) {
            //This will create a new image object with the same image as that in .small
            //We cannot directly get the dimensions from .small because of the
            //width specified to 200px in the html. To get the actual dimensions we have
            //created this image object.
            var image_object = new Image();
            image_object.src = $(".small").attr("src");

            native_width = image_object.width;
            native_height = image_object.height;
        } else {

            var magnify_offset = $(this).offset();
            var mx = e.pageX - magnify_offset.left;
            var my = e.pageY - magnify_offset.top;

            //Finally the code to fade out the glass if the mouse is outside the container
            if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
                $(".large").fadeIn(100);
            } else {
                $(".large").fadeOut(100);
            }
            if ($(".large").is(":visible")) {
                var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
                var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
                var bgp = rx + "px " + ry + "px";

                //Time to move the magnifying glass with the mouse
                var px = (mx - $(".large").width() / 2);
                var py = (my - $(".large").height() / 2);

                $(".large").css({
                    left: px,
                    top: py + 10,
                    backgroundPosition: bgp
                });
            }
        }
    })

    $('.t1').mouseenter(function () {

        $('.pointerTxt').fadeIn();
    });

    $('.t1').mouseleave(function () {

        $('.pointerTxt').fadeOut();
    });

});
</script>
4

1 回答 1

3

您只想在mousemove()按下鼠标按钮时完成所有操作，对吗？

$(document).ready(function() {
    var lbDown = false;

    $(".magnify").mousedown(function(e) {
        if (e.which === 1) {
            lbDown = true;
        }
    });
    $(".magnify").mouseup(function(e) {
        if(e.which === 1) {
            lbDown = false;
        }
    });

    $(".magnify").mousemove(function(e) {
        if(lbDown) {
            //your code here
        }
    });
});

我们使用自己的变量来跟踪鼠标左键 ( lbDown)。将其设置为trueon mousedown 和falseon mouseup，然后在 -function 中对此做出反应mousemove()。

编辑
这是一个小提琴。
当然，一旦用户停止拖动放大镜，您将需要添加一些代码来隐藏放大镜。

根据要求，这里对其背后的逻辑进行解释：
由于 JS 没有原生的方法来检查鼠标按钮的状态，我们需要自己实现这个功能。
鼠标按钮有两种状态：要么是要么up，down因此我们必须引入一个布尔变量来跟踪鼠标按钮的状态（在我的代码中lbDown用于左键按下）。
现在我们要做的就是根据状态设置这个变量。幸运的是，JS 提供了事件处理程序：mousedown一旦鼠标按钮被按下（点击）mouseup就会被触发，一旦用户释放点击的按钮就会被触发。所以我们将布尔变量设置为trueinmousedown和 to falsein mouseup。
我们现在可以通过一个简单的方法检查代码中的任何位置，if(lbDown)如果在检查时其中一个鼠标按钮当前处于按下状态。

不利的一面是，到现在为止，这对于每个鼠标按钮都是正确的！我们还没有实现任何东西来区分按钮。
JS 中的每个事件都有属性which，它可以让您确定按下哪个键或按钮来触发（键盘-/鼠标-）事件。
现在，当我们阅读jQuery API 时which，如果发生鼠标事件，which将1用于鼠标左键，因此我们添加另一个 if to mousedownand mouseup，因此lbDown只会在单击左键时设置。

于 2013-10-31T10:20:24.150 回答