JavaScript: 所望のイベントリスナの発火を妨げているイベントリスナを特定する | Wantedly Engineer Blog
Webアプリケーションでは、DOMの要素にイベントリスナ(イベントハンドラ)を取り付けることで、ユーザーによる様々な操作 (クリックなど) に応じて処理を行うことができます。 しかし、イベントリスナを登録しても、他のイベントリスナとの干渉によって意図した通りに発火しないことがあります。ここではその調査方法を紹介します。 前提知識: イベントバブリングイベントについては筆者の過去記事でも解説しましたが、あらためてここでも説明します。イベントバブリングを理解することが、イベントデバッグの近道だからです。 DOMにおいて、要素はネストすることによって木構造を形成します。ある要素(ターゲット要素)がクリックされるなどしてイベントが発生したとき、イベントはその要素自体だけではなく、その祖先要素にも送られます。これをイベントバブリングといいます。 イベントバブリングは2つの段階に分けられます。 Cap
Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話 - Qiita
Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話Vue.jsWebサービスバーコード個人開発Nuxt Nuxt.jsで開発しているWebサービスにバーコードリーダ機能をつけようとしたら、 いろいろハマったので、そのときの備忘録。 利用したのはQuaggaJS。簡単に使えて便利(´ω｀) はまったポイントは、以下の4点... 1. httpsじゃないとカメラを取得できない 2. QuaggaJSで表示されてないHTML要素を指定するとエラー 3. size/width/heightを指定してもいい感じにならない 4. iOSのPWAではカメラにアクセスできない いろいろハマったけど、QuaggaJS自体がすごく良いので、サクッとできた♪ 作ったのはこんな感じ バーコードリーダ、できてきた♪ いい感じな気がする(´ω｀) pic.t
PWAでカメラを使うためiOSとAndroidで異なるmanifestを読み込む - Qiita
TL;DR ・iOSのPWAでは表示モードがstandaloneの場合にカメラを開くことができない。 ・Androidでの起動時にはstandalone、iOSではbrowserで起動する。 ・ページアクセス時にuserAgentからOSを判定し、OSに応じて異なるmanifestを読み込む。 カメラを開く最小限のPWA構成 ファイル構成は下記の通りです。 icon.pngは適当な192x192の画像を用意してください。 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="manifest.json"> <link rel="apple-touch-icon" href="ico
【PWA】「ホーム画面に追加」の「Site cannot be installed: the page does not work offline」エラー対策
結論：serviceWorker用のJSファイルに「self.addEventListener('fetch', function(event) {});」と追記すれば直る。 自作のWebアプリで「ホーム画面に追加」機能を加えようと以下を用意しました。 manifest.json seviceWorker.js（空のファイル） HTMLのヘッダーで上記「manifest.json」を読み込むようにして、HTMLのフッターには以下のJSを追記。 window.addEventListener('load', function() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register("/serviceWorker.js") .then(function(registration) { console.lo
iOS8.4.1以降でhoverにopacityを設定するとリンクがダブルタップしないと動いてくれない問題にでくわした話 - Qiita
こんにちは！ 最近フロントよりもやってる@srockstyleです！ iOSの8.4.1になってa:hoverがなんかイラッとする挙動するようになったなあ？という方いませんか？ 僕です！ iOS8.4.1でダブルタップしないとリンクを飛んでくれない問題 ChromeでもSafariでも出現しました！ こんな感じのタグにすると発生するようです。
Android 4.0でtouchendが実行されない？！ - Gravity Pianist -個人的メモログ-
この問題に数日かかったので……なんか悔しくて……orzスマートフォン用のサイト作っていく際に、同一の画面上で左右のスワイプ検知とaタグによるリンク、上下のスクロールをやらなければならなくなってしまった。 とりあえず、スマートフォンのタッチを検知するイベントである touchstart,touchmove,touchend にスワイプの検知するコードを書いていった。 なんどか試していくうちにスワイプを検知することには、成功した。 だが、aタグによるリンクがあるため、各イベントで、event.preventDefault() でデフォルトのイベントを停止させていなかった。iPhone4SやAndroid 2.xなどで試して特に問題もなかったので安心しきっていたら、Android 4.0 で正常な動作をしない。具体的にいうと、スワイプにつられて動く画面が、スワイプを終えても動きっぱなしになってい
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
あにずむ : jQuery1.4でgetJSONが動かなくなった人へｗ - livedoor Blog（ブログ）
2010年02月19日22:34 カテゴリjavascript jQuery1.4でgetJSONが動かなくなった人へｗ ( ゜▽゜)/こんばんは！ 今日jQueryいじってたら1.3.2で普通に動いてた 「郵便番号から住所を取得して表示する機能」 が何故か動かなくなってましてｗｗ ちょっとハマったのでメモ。 動かなくなったコードはこんなかんじのコード！ $.getJSON( url, function(data){ if(data && data.address){ $('#address').val(data.address); }else{ alert(alertmsg); return; } } ); 返ってくるjsonデータは {addrjp:'東京都豊島区池袋'} みたいな感じ。 いままではボタン押すと正常に動いていたんですが jQuery1.4にしたらうんともすんとも言わなく
Rails3.1でエラー「in `autodetect': Could not find a JavaScript runtime.」 - 30日でいいのでプログラミング
Rails3.1でRSpecをインストールしようとしたら以下のようなエラーが出た。 JavaScript runtimeが見つからないとのこと。 $ rails g rspec:install gems/execjs-1.2.0/lib/execjs/runtimes.rb:46:in `autodetect': Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable) 環境 ruby 1.9.2p180 Rails 3.1.0.rc4 解決方法 Gemfileに以下の行を記述する。 gem 'therubyracer'あとは、再度bundleしたら、RSpecがイン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iOSでダブルタップしないとリンク反応しないバグ対応について - Qiita