Question

我在stackoverflow中遇到了同样问题的很多问题，我尝试了其中一些甚至我的代码没有按预期工作，所以我发布了它。

我正在进行简单的放大/缩小实现。但它没有像我预期的那样发挥作用。

我的代码在这里

<!DOCTYPE html>
<html>
<head>
<script src="scripts/vendor/jquery.min.js"></script>
<style>
div {
    width: 100px;
    height: 75px;
    background-color: red;
    border: 1px solid black;
}

div#div2 {
    margin: 100px;
    -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Chrome, Safari, Opera */
    transform: scale(1.1); /* Standard syntax */
}
</style>
<script>
var sclVal = 1;
var minZoom = 0.5;
var maxZoom = 3;

//alert("ggggggggggggg");

function ZoomIn(event) {
    if (mouseStillDown  && sclVal > minZoom ) {
        sclVal = sclVal - 0.1;
        console.log(sclVal);
        if (mouseStillDown && sclVal > minZoom) {
            $("#div2").css("-ms-transform", "scale(" + sclVal + ")");
            $("#div2").css("-webkit-transform", "scale(" + sclVal + ")");
            $("#div2").css("transform", "scale(" + sclVal + ")");
        }
    }
};

function ZoomOut(event) {
    if (mouseStillDown && sclVal < maxZoom ) {
        sclVal = sclVal + 0.1;
        console.log(sclVal);
        if (sclVal > minZoom && sclVal < maxZoom) {
            $("#div2").css("-ms-transform", "scale(" + sclVal + ")");
            $("#div2").css("-webkit-transform", "scale(" + sclVal + ")");
            $("#div2").css("transform", "scale(" + sclVal + ")");
        }
    }
};

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

    $("#ZoomOut").mousedown(function(event) {
        mouseStillDown = true;
        doZoomOut();
        event.preventDefault();
        //event.stopImmediatePropagation();
        //event.stopPropagation();
    });

    $("#ZoomOut").mouseup(function(event) {
        mouseStillDown = false;
        event.preventDefault();
        //event.stopImmediatePropagation();
        //event.stopPropagation();
    });

    $("#ZoomIn").mousedown(function(event) {
        mouseStillDown = true;
        doZoomIn();
        event.preventDefault();
        //event.stopImmediatePropagation();
        //event.stopPropagation();
    });

    $("#ZoomIn").mouseup(function(event) {
        mouseStillDown = false;
        event.preventDefault();
        //event.stopImmediatePropagation();
        //event.stopPropagation();
    });

});
function doZoomOut() {
    if (!mouseStillDown) {
        return;
    }

    if (mouseStillDown) {
        setInterval(ZoomOut, 100);
    }
};
function doZoomIn() {
    if (!mouseStillDown) {
        return;
    }

    if (mouseStillDown) {
        setInterval(ZoomIn, 100);
    }
};
</script>
</head>
<body>

    <input id="ZoomIn" type="button" value="-" />
    <input id="ZoomOut" type="button" value="+" />


    <div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

我有一个

缩小（直到此按钮div上的mousedown将缩小）

和

放大（直到此按钮div上的mousedown将放大）

按钮。

问题：但它没有按预期工作，即使我按下缩小div正确缩小。按下放大后，div会缩小并随机放大。

http://jsfiddle.net/ravikumarmaddi/ctdzgx5a/2/

Answer 1

您需要清除间隔

$("#ZoomOut").mousedown(function() {
    mouseStillDown = true;
    doZoomOut();
});

$("#ZoomOut").mouseup(function() {
    mouseStillDown = false;
    clearInterval(int);
});

$("#ZoomIn").mousedown(function() {
    mouseStillDown = true;
    doZoomIn();
});

$("#ZoomIn").mouseup(function() {
    mouseStillDown = false;
    clearInterval(int);
});

var int;

function doZoomOut() {
    if (!mouseStillDown) {
        return;
    }

    if (mouseStillDown) {
        int = setInterval(ZoomOut, 100);
    }
};

function doZoomIn() {
    if (!mouseStillDown) {
        return;
    }

    if (mouseStillDown) {
        int = setInterval(ZoomIn, 100);
    }
};

缩放事件传播不停止

1 个答案:

JSFIDDLE：http://jsfiddle.net/TRNCFRMCN/ctdzgx5a/3/。