jqueryのhoverで処理するイベントが終わらない

要素を自由に動かしリサイズできるものを作っています。その際、クライアントがタッチデバイスではない場合を考慮し、ピンチアウトピンチインの動作をパソコン端末ではマウスカーソルで行えるように記述しました。

ある要素にマウスカーソルがある場合のみ処理したいのですが、カーソルが外れた後も処理が止まらず困っています。またHTML上では画像サイズの基本数を表示（テスト用）しているのですが、
・hover時に1ずつ加減する
・一度hoverが終わると2ずつ加減する
・再度要素にhoverすると3ずつ加減する
・再び要素外に（略）4ずつ加減する
となります。

処理を要素の上に乗っている間だけ行うためにはどのように記述を変えればよいでしょうか。
また上記の加減の変動はなぜ起こるのかわかれば教えてください。
※要素imgは適当です。
※質問の箇所は「//ここから質問箇所//」で記します。

-------追記---------
数の増減に関しては、hoverが有効になったりならなかったりするたびに起こる現象で、hoverしている時だけ、という処理ができれば解決できそうなので無視していただいて結構です。
よろしくお願いします。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<title>タッチデバイスとパソコンデバイス</title>
7<script src="src/jquery-3.5.1.min.js"></script>
8<script src="src/hammer.js"></script>
9
10
11<script>document.createElement('main');</script>
12<style>
13*{
14    padding: 0;
15    margin: 0;
16}
17body{
18    color: #666;
19    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
20}
21h1{
22    margin-top: 30px;
23}
24h1,p{
25    text-align: center;
26}
27h2 {
28    margin-bottom: 15px;
29    text-align: center;
30}
31main {
32    max-width: 960px;
33    margin: 30px auto;
34}
35#panPinch,
36#tapSwipe {
37    width: 100%;
38    padding-bottom: 50%;
39    margin-bottom: 30px;
40    background: #ffe8ab;
41    position: relative;
42}
43#tapSwipe {
44    background: #abdaff;
45}
46#panPinch .element {
47    width: 120px;
48    height: 120px;
49    background: #fff;
50    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
51    position: absolute;
52    top: 120px;
53    left: 120px;
54}
55#tapSwipe .tapElm {
56    width: 32px;
57    height: 32px;
58    margin-left: -16px;
59    margin-top: -16px;
60    border-radius: 50%;
61    background: #499fe1;
62    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
63    position: absolute;
64}
65#tapSwipe .swipeElm {
66    width: 160px;
67    padding: 16px;
68    margin-left: -80px;
69    background: #fff;
70    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
71    text-align: center;
72    position: absolute;
73    left: 50%;
74    bottom: 30px;
75}
76footer {
77    padding: 15px;
78    margin-top: 30px;
79    border-top: solid 1px #ccc;
80}
81
82@media only screen and (max-width: 959px) {
83
84main {
85    padding: 15px;
86}
87#panPinch .element {
88    width: 44px;
89    height: 44px;
90    top: 20px;
91    left: 20px;
92}
93
94}
95</style>
96</head>
97
98<body>
99<main>
100    <h2>パンとピンチとマウスカーソル</h2>
101    <!--div id="panPinch"><div class="element" id="panPinchElm"></div></div-->
102	<div id="panPinch">
103	<img class="element" id="panPinchElm" src="1.jpg" style="height:100px;">
104	</div>
105
106	<div class="wheel">1</div>
107
108
109</main>
110<script>
111document.createElement('main');
112$(function() {
113    var $tgPanPinchArea = document.getElementById("panPinch"),
114        $jqTgPanPinchArea = $($tgPanPinchArea),
115        $tgPanPinchElm = document.getElementById("panPinchElm"),
116        $jqTgPanPinchElm = $($tgPanPinchElm),
117        $hammerObj = new Hammer($tgPanPinchElm),
118        $hammerObj2 = new Hammer($tgPanPinchArea),
119        panTime = false,
120        pinchTime = false,
121        $pinchTimer = {};
122    $hammerObj.get("pan").set({ enable: true });
123    $hammerObj.get("pinch").set({ enable: true });
124    $jqTgPanPinchElm.css("transform", "scale(1)");
125
126    //pan event
127    $hammerObj.on("pan",function(event) {
128        if(event.isFinal) { //end
129            panTime = false;
130            $jqTgPanPinchArea.data("down", false);
131            if(Number(String($jqTgPanPinchElm.css("left")).replace("px", "")) < 0)
132                $jqTgPanPinchElm.css("left", "0px");
133            if(Number(String($jqTgPanPinchElm.css("left")).replace("px", "")) > ($jqTgPanPinchArea.width() - $jqTgPanPinchElm.width()))
134                $jqTgPanPinchElm.css("left", ($jqTgPanPinchArea.width() - $jqTgPanPinchElm.width()) + "px");
135            if(Number(String($jqTgPanPinchElm.css("top")).replace("px", "")) < 0)
136                $jqTgPanPinchElm.css("top", "0px");
137            if(Number(String($jqTgPanPinchElm.css("top")).replace("px", "")) > ($jqTgPanPinchArea.outerHeight() - $jqTgPanPinchElm.height()))
138                $jqTgPanPinchElm.css("top", ($jqTgPanPinchArea.outerHeight() - $jqTgPanPinchElm.height()) + "px");
139        } else {
140            if(!panTime) { //start
141                panTime = event.timeStamp;
142
143                $jqTgPanPinchArea
144                    .data("down", true)
145                    .data("x", event.center.x)
146                    .data("y", event.center.y)
147                    .data("elmPosX", Number(String($jqTgPanPinchElm.css("left")).replace("px", "")))
148                    .data("elmPosY", Number(String($jqTgPanPinchElm.css("top")).replace("px", "")));
149            } else { //move
150                if ($jqTgPanPinchArea.data("down") == true) {
151                    $jqTgPanPinchElm.css({
152                        "left": ($jqTgPanPinchArea.data("elmPosX") - ($jqTgPanPinchArea.data("x") - event.center.x)) + "px",
153                        "top": ($jqTgPanPinchArea.data("elmPosY") - ($jqTgPanPinchArea.data("y") - event.center.y)) + "px"
154                    });
155                }
156            }
157        }
158    });
159    
160    //pinch event
161    $hammerObj2.on("pinch",function(event) {
162        event.preventDefault ? event.preventDefault() : (event.returnValue = false);
163        if(!pinchTime) { //start
164            pinchTime = event.timeStamp;
165            var preScale = String($jqTgPanPinchElm.css("transform")).replace("matrix(", "");
166            preScale = preScale.replace(")", "");
167            preScale = preScale.split(",");
168            preScale = Math.sqrt(preScale[0] * preScale[0] + preScale[1] * preScale[1]);
169            $jqTgPanPinchArea
170                .data("preScale", preScale)
171                .data("scale", event.scale);
172        } else { //move
173            if($pinchTimer) clearTimeout($pinchTimer);
174            $jqTgPanPinchElm.css("transform", "scale(" + ($jqTgPanPinchArea.data("preScale") + (event.scale - $jqTgPanPinchArea.data("scale"))) + ")");
175            $pinchTimer = setTimeout(function() { //end
176                pinchTime = false;
177            }, 100);
178        }
179    });
180
181
182});
183
184
185//ここから質問箇所//
186//ここからマウスホイールで画像の大きさを変えるスクリプト
187$('#panPinchElm').hover(function(){
188	var props = $('#panPinchElm').css('transform');
189	var values = props.split('(')[1];
190	values = values.split(')')[0];
191	values = values.split(',');
192	var a = values[0];
193	var b = values[1];
194	var scale = Math.sqrt(a * a + b * b);
195	console.log('画像の現行サイズは' + scale);
196	//$('.wheel').html(scale);
197
198    var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
199    $(document).on(mousewheelevent,function(e){
200        var num = parseInt($('.wheel').text());
201        e.preventDefault();
202        var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
203        if (delta < 0){
204            var dNum = num - 1;
205            $('.wheel').html(dNum);
206			var Nscale = 1 + dNum * 0.2;
207			$('#panPinchElm').css('transform', 'scale(' + Nscale +',' + Nscale + ')');
208			console.log(Nscale);
209        } else {
210            var uNum = num + 1;
211            $('.wheel').html(uNum);
212			var Nscale = 1 + uNum * 0.2;
213			$('#panPinchElm').css('transform', 'scale(' + Nscale +',' + Nscale + ')');
214			console.log(Nscale);
215        }
216    });
217
218});
219
220
221</script>
222</body>
223</html>

--------追記２---------
off()メソッドというものがあると聞き少しいじってみましたがうまくいきません。
うーん・・・。思ったより難しい。

javascript
1$(function(){
2	$('#panPinchElm').on({
3	'mouseenter': function(Resize) {
4	console.log('hoverした');
5	var props = $('#panPinchElm').css('transform');
6	var values = props.split('(')[1];
7	values = values.split(')')[0];
8	values = values.split(',');
9	var a = values[0];
10	var b = values[1];
11	var scale = Math.sqrt(a * a + b * b);
12	var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
13    $(document).on(mousewheelevent,function(e){
14        var num = parseInt($('.wheel').text());
15        e.preventDefault();
16        var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
17        if (delta < 0){
18            var dNum = num - 1;
19            $('.wheel').html(dNum);
20			var Nscale = 1 + dNum * 0.2;
21			$('#panPinchElm').css('transform', 'scale(' + Nscale +',' + Nscale + ')');
22			console.log(Nscale);
23        } else {
24            var uNum = num + 1;
25            $('.wheel').html(uNum);
26			var Nscale = 1 + uNum * 0.2;
27			$('#panPinchElm').css('transform', 'scale(' + Nscale +',' + Nscale + ')');
28			console.log(Nscale);
29        }
30	});
31	},
32	'mouseleave': function() {
33	console.log('hover外れた');
34	$('#panPinchElm').off('mouseenter mouseleave');
35	}
36})
37});