WEBサイトの製作、管理、とかの日記ブログです。

<<   2023年05月   >>
SunMonTueWedThuFriSat
 123456
78910111213
14151617181920
21222324252627
28293031   
新着記事
カテゴリ
過去ログ
コメント
検索
clickとmouseenter
mouseenterとmouseleaveとclickで、
要素にマウスオーバーでポップアップしてマウスアウトで閉じる。
クリックした場合もON/OFF。

ってなところで、タッチパネルでうまく行ってなかった。
どうもクリックした直後にmouseleaveが発生しちゃってる感じ。

で、clickの時にmouseleaveのイベントリスナを外してみたが変わらない感じ。
clickの前にmouseenterが発生しちゃう?

PCのクリックが無効になっちゃうが、clickの代わりにtouchstartにしてみたらmouseenterより先に発動してる気配。

ただ、ポップアップが728x90の要素なんだが、728をポップアップしちゃうと縦画面スマホではみ出す。
468x60とかにしておいたほうが良さげ。

この記事へのコメント
親要素にmarginがあるからか画面は480pxの様だが468pxでもはみ出しちゃうぽいわ。
ポップアップを300x250に代えた。

あと、touchstartでポップアップだと座標取得の方法が変わっちゃうから、
touchstart→mouseenterをリムーブ
にしてclickでオンオフにした。
そすればPCのクリックも有効。
管理人 2018-06-06 16:53:26
というか座標計算おかしかった
管理人 2018-06-06 17:07:50
だがスマホの画面で300pxのポップアップでほとんど余りがないや。
デバイスが480pxだがブラウザは300ちょいしかない模様。
やっぱ300のが良さげ。
管理人 2018-06-06 17:11:00
ポップアップするiframeにviewport設定してないからかと思ったが変わらない。
ズームは設定してないが、ポップアップ前の段階での最大幅要素に応じてズームされちゃってる模様。

ズームはいじらないほうが良さそうな気がする。
というわけで、やっぱ468pxのポップアップはやめたほうが良さげかな?
管理人 2018-06-06 17:23:26
Androidを4.4→7.1に変えたんだが、
デバイス自体は800x480だがどうも7.1だと320pxになるぽい。
ブラウザのズームが変わってるんではなく実pxは480だが320になってるということ。

開発者オプションから最小幅480pxにしたら変わったが、480pxだとステータスバーとか小さすぎるわ。
320pxで問題ない感じで作らんといかんな。
管理人 2018-06-06 18:11:58
名前:
URL
コメント:
この記事へのトラックバック :
whblog 1.7