2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

localhostでだけclickが複数回実行される?!

Posted at

開発環境(localhost)に、Browser-sync使っているなら、この続きを読んでみてください。

element.addEventListener('click', (e)=> {
    console.log(e); //コレなんぞ2回連続実行される。。
}, false);

なぜか、clickイベントのcallbackが2回走るんだよ!
なんでだよ、全然原因がわかんねーよ!!!

・・・って先日はまったのでメモ残します。

よくよく調べたら、原因はBrowser-syncのclickイベントでした。

Browser-syncのSync Optionsの設定で、ClicksをOFFにしてみましょう。
image.PNG
自分の場合、ClicksをOFFにしたら、複数回clickイベントのコールバックが実行される現象が解消されました。

上記画面(Sync Optionsの設定)へのアクセス方法は、Browser-sync実行時に、
image2.PNG
こんな情報が表示されますので、このUIに記載されたアドレス(上記画像例でいうと localhost:3001)を、ブラウザから開けば表示されます。

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?