クリックか
スクロールか
はっきりねリンク要素のスクロール
PCだと勝手に
ページ遷移してしまう。

image: クリックかスクロールかはっきりね
Click or Scroll

PCでリンク要素をスクロールしても勝手に ページ遷移しないようにイベントを切り分けたい　　

 | 2021/06/28

PCの場合リンク要素をスクロールすると、たまにページ遷移してしまう

このサイトのTOPは、リンクした要素をスワイプでスクロールできる様にしています。
この仕様だとスクロールした時クリックと判定されてリンク先へ飛んでしまうという問題があります。スマホでは仕様上起こりえないのですが PCだとよく起きます。

スライダーのプラグインなんかも、リンクできないのがありますが、この問題があるからでしょう。
ほかには明示的に『詳しくはこちら』などのボタンを設置し、クリック範囲を限定するスライダーもありますがスマートではないですね。
ユーザビリティ的にもスクロールするつもりが間違ってボタンを押してページ遷移した、というのは避けたいところです。

やはりオブジェクト全体をクリック範囲かつスクロール範囲にし、ユーザーの意図をプログラムが正しく判定するというようにしたいですね。

クリックとスクロールの違いはマウスの移動距離

クリックとスクロールの違いは何かというとマウスの移動距離です。
なので単純にマウスを押した時の座標とマウスを放した時の座標の差分を計測します。

短ければクリックと判定、それ以外はスクロールで処理というシンプルなロジックです。
まあ、クリックといってもマウスを押した時に2～3pxはずれることあるでしょうから4pxくらいまでならクリックでいいんじゃないでしょうか。

また、デフォルトではクリックを無効に設定にし、クリック判定の時のみリンク先を取得しページ遷移するようにします。

実装方法

下記の様に『'mousedown』と『mouseup』イベントからポジション値を取得し比較します。

・イベント処理
アイテム名.addEventListener('mousedown',関数名, {passive : true});
アイテム名.addEventListener('mouseup', 関数名, {passive : true});

・ポジション値取得
if(window.ontouchstart===null){return e.changedTouches[0].pageX;}
else{return e.clientX;}

あらかじめ e.preventDefault(); でクリックイベントをキャンセルしておき、クリックかスクロールを分岐した後 4px以下であれば location.href でリンク先へ遷移させるようにします。

実装見本はこのサイトTOPのスライダー箇所になります：https://studio-happyvalley.com/wp/

マウスの移動距離で分岐

『クリックかスクロールかはっきりね』関連のお薦め

このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら

Permanent Exhibition