Question

标题解释了这一切。我在提供拖拽事件时遇到了问题。我试图用mousedown替换mousemove，可能会被mousedown一次触发并安定下来，但它有助于帮助。如何以编程方式执行此操作。< / p>

如果您想引用我想要操作的代码，您可以参考此代码。请忽略它。

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

Answer 1

只有在按下鼠标按钮时才想在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）。在mousedown上将其设置为true，在mouseup上将其设置为false，然后在mousemove() - 函数中对此做出反应。

修改
这是fiddle 当然，一旦用户停止拖动它，你就会想要添加一些代码来隐藏放大镜。

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

缺点是，到现在为止每个鼠标按钮都是如此！我们还没有实现任何区分按钮的功能。
JS中的每个事件都有属性which，可以让您确定按下哪个键或按钮来触发（键盘 - /鼠标 - ）事件。
现在，在阅读我们阅读的jQuery API on which时，如果发生鼠标事件，鼠标左键which将为1，因此我们向mousedown添加另一个和mouseup，只有在点击左键时才会设置lbDown。

Answer 2

我没有足够的声誉来评论，但我想补充一点，上面的代码（来自正确答案）可能会引发问题。如果你只想要一个特别的东西＆＃34;例如，在拖动时移动（例如，要使用当前clientX位置移动的图像），最好使用$(document).mouseup ...而不是$("thing").mouseup，因为您可能不想释放那个确切的东西你的鼠标按钮。这给我带来了一个问题，我只是想提一下。

用mousedrag替换mousemove？

2 个答案: