JavaScript/Tips

JavaScript Tips

よくある質問への回答｜随時追加

CONTENTS

• スクロールしただけで resize イベントが発生してしまう
• iOS で要素をタッチしてもクリックイベントが発生しない
• タブレット iPad でホバリングメニューは？
• 当該要素を特定する方法（jQuery）
• 隣接する要素を特定する方法（jQuery）
• jQueryのバージョンを上げたらエラー

スクロールしただけで resize イベントが発生してしまう

iOS では、スクロール時にリサイズイベントが発火するので、そのたびにリサイズ時用の処理も同時に実行されてしまいます。リサイズ時の処理がメニューの表示にも関わるものであると「メニューを手繰ろうとしてスクロールするとリサイズ時の処理が動いてメニューが消えてしまう」といった問題が生じます。これを回避するには、本当にリサイズされたときにのみ、目的のコードが実行されるようにする必要があります。以下に事例を記載します。

• 一般的な記述（iOSのスクロールでも実行される）

  $(function (){
  
    // Window リサイズ時の処理
    $(window).on('resize',function(){
        // ここに、resize時に行う処理を書く
    });
  
  });

• 修正した記述（iOSのスクロールによる誤動作を回避）

  $(function (){
  
    // 読み込み時に Windowの初期幅を取得しておく
    var currentWidth = window.innerWidth;
    
    // Window リサイズ時の処理
    $(window).on('resize',function(){
    
       // iOSのスクロールで同時発火する resize イベントは無視する
       if ( currentWidth == window.innerWidth ) { return; }
    
       // 本当にリサイズされた場合は、現在幅をバックアップ
       currentWidth = window.innerWidth;
  
       // ここに、resize時に行う処理を書く
  
    });
   
  });

iOS で要素をタッチしてもクリックイベントが発生しない

iOSでは HTMLで通常クリックが期待される要素（button、a など）以外、すなわち div、p、span などのクリックではイベントが発生しない仕組みになっているので、onClickでスクリプト を書いても処理が行われることがありません。

これを解決するには、当該要素を「クリックが期待される要素」として認識させる必要があり、これには、以下のように CSSを書くと解決します。

.target { cursor: pointer; }

基本的には Javascript で以下のようにきちんと記載すれば問題ありません。

$('.target').on('click', function(){ /* 処理内容 */});

タブレット iPad でホバリングメニューは？

要素に ontouchend を書き加えるだけでタブレット等でもホバリングが有効に

<div id="menuBar" ontouchend>

当該要素を特定する方法（jQuery）

例えば、画像を複数配置したページで、「マウスオーバーで画像のフェード」を実現するには？

例えば以下のような img 要素が複数列挙されているとします。

<img class="fade" src="images/xxxx.jpg">

同様の要素が複数ある場合、上記の .fade のように class を定義して操作するのが一般的ですが、以下のような単純な記述だと、すべての.fade 要素が一斉に動作してしまいます。

$(".fade").hover(
  function(){ $(.fade).fadeTo("slow", 1.0); },
  function(){ $(.fade).fadeTo("slow", 0.2); }
);

当該要素のみを選択的に操作するには this を使って以下のように記述します。

$(".fade").hover(
  function(){ $(this).fadeTo("slow", 1.0); },
  function(){ $(this).fadeTo("slow", 0.2); }
);

この事例は、以下にあります。
DEMO：https://koichi-inoue.github.io/JQ_Effects/
Download：https://github.com/koichi-inoue/JQ_Effects

隣接する要素を特定する方法（jQuery）

例えば、ボタンと画像のペアを複数配置したページで、「ボタンクリックで画像のトグル表示」を実現するには？。
例えば以下のような div 要素が複数列挙されているとします。

<div>
  <button class="button">Title</button>
  <img class="toggleImage"  src="images/monalisa.jpg">
</div>

同様の要素が複数ある場合、上記の .button や .toggleImage のように class を定義して操作するのが一般的ですが、以下のような単純な記述だと、すべての.toggleImage 要素が一斉にトグル動作してしまいます。

$(".button").click( function () {
  $(".toggleImage").slideToggle();
});

そこで、クリックされた要素に隣接した要素のみを選択的に操作するという方針で、this と next を使って以下のように記述すると、問題が解決します。

''$(this).next(要素).slideToggle();'' 

具体的には、以下のような書き方になります。

$( function(){
   $(".toggleImage").hide();      // 画像の初期状態（隠す）
   $(".button").click( function () {
     $(this).next(".toggleImage").slideToggle();
   });
});

サンプル：ToggleSample.zip

jQueryのバージョンを上げたらエラー

開発コンソールで確認すると、以下のようなエラーが表示されることがあります。

Syntax error, unrecognized expression: a[href^=#] 

jQuery の仕様が変更されたため、以下の記述が問題となっています。

$('a[href^=#]').click(function () { ~

内側の引用符を足せばエラーは解消されると思います。

$('a[href^="#"]').click(function () { ~