mousemoveイベントで画像の拡大・縮小を行いたい２(要素の拡大・縮小時のエラー等)

タイトルの通り、mousemoveイベントで要素の拡大・縮小を作成しました。
要素の端をクリック(mousedown→mousemove)すると、カーソルの座標位置に合わせて要素が拡大・縮小します。
前回の質問の延長になりますが、教えて頂きたくお願い致します。

前回の質問：
https://teratail.com/questions/335946

流れ：

ダブルクリック　→要素を作成
作成した要素の端をmousedown→mousemoveイベントで要素の拡大・縮小が行われる

問題点：

・要素を拡大する時に、要素がブレながら拡大される(縮小時は特に問題なし)
・エラーが表示される(mousemoveイベントは処理されてるのになぜ？)

下記エラー内容：

Uncaught TypeError: Cannot read property 'style' of null
at HTMLDivElement.element.onmousemove (pen.js:125)

対象コード：

obj.elm.style.width = e.offsetX + 'px';

やりたいこと：

上記問題点を解消したい。

全体ソースコード：

https://codepen.io/mio-rei/pen/ExWjyKb

ソースコード抜粋：

JavaScript
1// マウスダウン(要素の移動　初期動作)
2    const mouseDown = (e) => {
3        let t =e.target;
4        obj.elm = t;
5        if(t.nodeName != 'IMG' && t.nodeName != 'TEXTAREA') return;
6        if ( e.offsetX < 5 || e.offsetX > t.offsetWidth -5 ||
7             e.offsetY < 5 || e.offsetY > t.offsetHeight -5) {
8          //要素の端をクリックしたら要素を拡大・縮小する
9                console.log('test成功です');
10                mousemove();
11      
12        } else { 
13          /*要素の端以外の場所をクリックしたら
14          要素を移動する*/
15        }
16    };
17      
18//マウスムーブ(要素の移動(画面端))
19    const mousemove = () => {
20        element.onmousemove = (e) => {
21        obj.elm.style.width = e.offsetX + 'px';
22        obj.elm.style.height = e.offsetY + 'px';
23        }
24    }
25
26    
27 // マウスムーブ(要素の移動(画面端以外、未完成))
28/*
29    const mouseMove = (e) => {
30        if(!obj.elm ) return;
31        obj.setPos(e, obj);
32        obj.setOffset(e);
33        };
34*/
35
36// マウスアップ(要素の移動　キャンセル)
37    const mouseUp = () => {
38        if(obj.elm) {
39            obj.elm = null;
40        }
41    };

行動規範の内容に同意します

回答2件

自己解決

・要素を拡大する時に、要素がブレながら拡大される(縮小時は特に問題なし)
e.offsetは要素内の座標値を取得する。
この場合だと、カーソルは二つの要素の座標を取得している(elementとobj.elm=textera)
カーソルをゆっくり動かす分にはいいが、すばやく動かすとtextaraの要素からはみ出る。
はみ出た時に、element要素の座標位置を取得する事になる。
縮小する場合は、textareaの要素内だけにカーソルの位置が入っているので問題ないが、
拡大する時は、textareaとelementの要素の座標位置を行ったり来たりしているので、要素がブレる現象が起きている。

解決法：
offsetX→clientXを使用する。
clientXはブラウザの表示エリアを取得するため、取得座標は一種類になる。
そして、座標位置を下記の様に計算して取得すれば、要素がブレることなくtextarea拡大・縮小ができるようになる。

const mousemove = (e) => {
const elmsubX = obj.elm.getBoundingClientRect().left - cRect().left;
const elmsubY = obj.elm.getBoundingClientRect().top - cRect().top;

    obj.elm.style.width = e.clientX - cRect().left - elmsubX + 'px';
    obj.elm.style.height = e.clientY - cRect().top - elmsubY + 'px';
}

・エラーが表示される(mousemoveイベントは処理されてるのになぜ？)
理由はmousemoveイベントが継続した状態が続いているから。
mouseupイベントでobj.elm = null;にして中身を空にしてmousemoveのイベントをキャンセルしているが、実際はこれだとmousemoveは動いたままである。
状況によっては要素の中身をnullにしてキャンセルするような動作ができるが、mousemoveイベントが継続している状態のままobj.elmの中身をnullにしているため、エラーとなる。

解決法：
obj.elm=nullの代わりにイベントキャンセルを行うコードを記入

const mouseUp = () => {
element.removeEventListener('mousemove', mouseMove);
element.removeEventListener('mousemove', mousemove);
}

投稿2021/05/12 04:49

rei78087487

総合スコア12

mouseUpでobj.elm = null;しているからobj.elm.styleがエラーになっているのでは？

投稿2021/05/09 03:26

itagagaki

総合スコア8402

rei78087487

2021/05/11 00:17

前回に引き続き回答ありがとうございます。なぜ、obj.elm = null;にするとエラーが起きるのでしょうか？また、obj.elm = null;にすることでmousemoveイベントを解除しているのですが、それを無くすとなるとmousemoveの解除ができなくなるので、どの様に対処すれば宜しいでしょうか？ご教示お願い致します。