缩放事件传播没有停止

Question

I saw lot of issues with the same problem in our stackoverflow, I tried some of them even my code is not working as expected so I am posting it. 我在stackoverflow中看到了很多与同一问题有关的问题，即使我的代码未按预期工作，我也尝试了其中的一些问题，因此我将其发布了。

I am doing a simple zoom in/zoom out implementation. 我正在做一个简单的放大/缩小实现。 But it is not working as i expected. 但是它没有按我预期的那样工作。

My code is here 我的代码在这里

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

I have a 我有一个

zoom out( till mousedown on this button div will be zoom out) 缩小（直到此按钮上的鼠标向下将被缩小）

and 和

zoom in ( till mousedown on this button div will be zoom in) 放大（直到此按钮div上的鼠标按下将被放大）

buttons. 纽扣。

Problem: But it not working as expected, even I press Zoom Out the div is zooming out properly. 问题：但是，即使按了“缩小”，它也无法正常工作，div仍在正确缩小。 After I press Zoom in, then div is zooming out and zooming in randomly. 按放大后，然后div缩小并随机放大。

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

Answer 1

You needed to clear the interval 您需要清除间隔

$("#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/ . JSFIDDLE： http : //jsfiddle.net/TRNCFRMCN/ctdzgx5a/3/ 。

缩放事件传播没有停止

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-10-06 06:25:35

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

解决方案1
0 已采纳 2014-10-06 06:25:35