画面をこするとページ遷移するコード

画像をこするとイベントが発火し、
ページ遷移するサイトを作りたいです。
（ランプをこするとベージ遷移をするイメージ）

JavaScriptで、画像をこするという挙動が検索してもわからずで、
教えていただきたく投稿しました。

下記は画像を押すとページ遷移するというところまでしかできておりません。

html
1<body>
2    <div class="img" onclick="imgClick();">
3        <img src="img.jpg" alt="">
4    </div>
5
6    <script>
7        function imgClick() {
8            document.location.href = "index2.html";
9        }
10    </script>
11</body>

無知で恐縮ですがご教示いただけますと幸いです。
よろしくお願いいたします。

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

回答2件

ベストアンサー

要素の上をマウスで６００ピクセル移動するとクリック！

html&js
1<!DOCTYPE html>
2<meta charset="utf-8">
3<title></title>
4<style>
5</style>
6
7<body>
8
9<a href="https://www.google.co.jp/">
10  <img src="https://picsum.photos/600/200?random=1"><br>
11  <p>Test</p>
12</a>
13
14<script>
15
16
17class A {
18  #clientX = null;
19  #clientY = null;
20
21  constructor (target, limit = 600) {
22    this.target = target;
23    this.limit = limit;
24    this.distance = null;
25
26    this.clientX = null;
27    this.clientY = null;
28
29    document.addEventListener ('mousemove', this, false);
30  }
31
32  targetOut () {
33    this.distance = this.#clientX = this.#clientY = null;
34    return this;
35  }
36
37  targetIn (event) {
38    this.distance = 1;
39    this.#clientX = event.clientX;
40    this.#clientY = event.clientY;
41  }
42
43  targetMove (event) {
44    let { clientX: x, clientY: y } = event;
45    this.distance += (
46      (this.#clientX - x) ** 2 +
47      (this.#clientY - y) ** 2
48    ) **.5;
49
50    if (this.distance < this.limit) {
51      this.#clientX = x;
52      this.#clientY = y;
53//      console.log(this.distance);
54    }
55    else {
56      this.target.click ();
57    }
58  }
59
60  handleEvent (event) {
61    let e = event.target;
62    if (this.target.contains (e)) {
63      if (! this.distance)
64        this.targetIn (event);
65      this.targetMove (event);
66    } else {
67      this.targetOut (); 
68    }
69  }
70}
71
72let a = new A (document.querySelector ('a'));
73
74</script>