縮放事件傳播沒有停止

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上的鼠標按下將被放大）

紐扣。

問題：但是，即使按了“縮小”，它也無法正常工作，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 個解決方案

解決方案1
0 已采納 2014-10-06 06:25:35

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

縮放事件傳播沒有停止

問題描述

1 個解決方案

解決方案1 0 已采納 2014-10-06 06:25:35

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

解決方案1
0 已采納 2014-10-06 06:25:35