画面をこするとページ遷移するコード
画面をこするとページ遷移するコード
https://teratail.com/questions/j459osplrnxfeo
「こする」をどうとらえるか?
<!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> </style> <body> <a href="https://www.google.co.jp/"> <img src="https://picsum.photos/600/200?random=1"><br> <p>Test</p> </a> <script> class A { #clientX = null; #clientY = null; constructor (target, limit = 600) { this.target = target; this.limit = limit; this.distance = null; this.clientX = null; this.clientY = null; document.addEventListener ('mousemove', this, false); } targetOut () { this.distance = this.#clientX = this.#clientY = null; return this; } targetIn (event) { this.distance = 1; this.#clientX = event.clientX; this.#clientY = event.clientY; } targetMove (event) { let { clientX: x, clientY: y } = event; this.distance += ( (this.#clientX - x) ** 2 + (this.#clientY - y) ** 2 ) **.5; if (this.distance < this.limit) { this.#clientX = x; this.#clientY = y; // console.log(this.distance); } else { this.target.click (); } } handleEvent (event) { let e = event.target; if (this.target.contains (e)) { if (! this.distance) this.targetIn (event); this.targetMove (event); } else { this.targetOut (); } } } let a = new A (document.querySelector ('a')); </script>