mousedown/mousemove/mouseup【静的なクリックを検出する方法】

やりたいこと

静的なクリックとマウスドラッグを正確に判別したいです。

最終的につくるもの：sliderの画像をクリックしたときにはAの処理をするが、
マウスドラッグをした際にはその処理はさせない。
今回つくるもの：クリックしたときは：console.log('click')、ドラッグしたときは：console.log('drag')を出す処理をしたい

今こまっていること

きちんと動くケース
・jsfiddle.netで仮のプログラムを作成すると動く。

動かないケース
・作成したプログラムのurlを第三者のPCで確認してもらう→clickを認識しない(すべてドラッグと認識する)。
→そこでブラウザを新規で立ち上げてもらって再度urlにアクセスすると、クリックとドラッグをきちんと判別するようになる。

参考サイト
こちらを参考に作成したのですが、同じ現象が発生します。
https://lab.syncer.jp/Web/JavaScript/Snippet/49/

現在jsfiddle.netに記載している方法はこちらを真似しました。
https://codeday.me/jp/qa/20181130/35681.html

何が原因なのか、そしてどうしたら新規ウィンドウを立ち上げることなく
クリックとドラッグを判別することができるのかを知りたいのです。
もしくは、これでの書き方はあきらめて他の方法を探すべきなのかも考えています。

コードはこちらに記載しています

下記のurlをご覧いただくとわかりやすいかもしれません。
https://jsfiddle.net/4ns3x5ua/13/
※scssに設定しているのですが、第三者に渡した際自動的にcssになってしまうようです。
全て赤で見づらいと思うので、お手数ですがscssに変換してご確認ください。

上のurlが開けない場合、下記をご確認くださいませ。

javascript
1var flag = 0;
2var element = document.getElementsByClassName('test');
3for(var i = 0;i < element.length;i++) {
4element[i].addEventListener("mousedown", function(){
5    flag = 0;
6}, false);
7element[i].addEventListener("mousemove", function(){
8    flag = 1;
9}, false);
10element[i].addEventListener("mouseup", function(){
11    if(flag === 0){
12      console.log("click");
13    }
14    else if(flag === 1){
15        console.log("drag");
16    }
17}, false);
18}

html
1<div class="inner">
2  <div class="test"></div>
3  <div class="test"></div>
4  <div class="test"></div>
5  <div class="test"></div>
6</div>

scss
1.inner {
2  display: flex;
3}
4.test {
5  background: red;
6  width: 300px;
7  height: 300px;
8  border: 1px solid #000;
9  &:nth-of-type(odd) {
10    background: #000;
11  }
12}

どう検索したらいいのかもわからず。
ヒントでもいいのでなにかご指示いただけると嬉しいです。
なるべく早く、ご回答内容/いただいた質問に答えたいと考えていますが
作業中のため返信が遅くなる可能性がございます、ご了承いただけますと幸いです。
それではお忙しい中恐れ入りますがよろしくお願いいたします。

m.ts10806

2019/05/23 04:01

URLはマークダウンの「リンクの挿入」でご提示ください。

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

回答2件

ベストアンサー

つかめるイベント

javascript
1<script>
2["mousedown","mousemove","mouseup","dragstart"].forEach(function(x){
3  document.addEventListener(x,function(e){
4    e.stopPropagation();
5    console.log(e.type);
6  },false);
7});
8</script>
9<div style="background-Color:red;width:100px;height:50px" draggable="true">drag me!</div>
10<div style="background-Color:yellow;width:100px;height:50px">can't drag</div>
11