カテゴリーアーカイブ jQuery

村上 著者:村上

【jQuery】スマートフォンでのタッチイベントについて

本日の記事は、何だか久しぶりな気がするjQueryについての技術ネタ!

スマートフォンサイトで、地図とマップピンを表示させることがあったのですが、その際に、「ドラッグではピンの位置はそのままで、地図をタップした時のみマップピンを移動させる」という処理をさせたい、ということがありました。
上記のように、ドラッグとタップで処理を変えるときなどに、タッチイベントを活用したので、自分の覚え書きとしてまとめます。

タッチイベントの種類は下記の通り。

  • touchstart
  • touchend
  • touchmove

他にも、touchcancel というのがあるらしいですが、なかなか使う機会が分からなかったので、今回は割愛します。

 

まずは、それぞれのイベントについて簡単にまとめ。
最初は、touchstart について。
こちらは、タッチされたときに実行されるイベントです。

$("#main").on('touchstart', function(){
    // 画面がタッチされた時に実行したい処理
});

id に main が指定された要素に対して touchstart イベントを指定しているので、main がタッチされた瞬間に発火します。
こちらは click とほぼ同じイメージで動作するので、分かりやすく使いやすいです。

次は、touchend について。
こちらは 画面から指が離れたタイミングで発火します。

$("#main").on('touchend', function(){
    // 画面をタップして指が離れた時に実行したい処理
});

ただし、touchend では、event.changedTouches[0].pageX や event.changedTouches[0].pageY で、X座標・Y座標の位置を取得できないので注意が必要とのこと。
私は 地図の表示に Mapbox を利用しているので、問題なかったのですが、jQueryでX座標・Y座標を取得したい場合は、touchstart を使うか、touchmove を併用して変数に格納するのが良いとのこと。
このあたりはお好みで使い分けてもいいと思います。

最後は、touchmove について。

$("#main").on('touchmove', function(){
    // 画面がドラッグしている時に実行したい処理
});

こちらはドラッグをしている間に呼ばれるイベントです。
繰り返し呼ばれるので、座標の位置情報を変数に格納するなど、簡単な処理を書くだけにとどめたほうが良いとのこと。
また、指を移動させないと、touchmove が発火しないことがあるとのことでしたので、このあたりも注意したほうがよさそうです。

 

で、最後に私が実際に書いたコードがこちら。

var isDrag = false;  // ドラッグ中かの判定
// マップがドラッグされたときに実行される<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
$("#map").on('touchmove', function (e) {
    if(!isDrag){
        // ドラッグ中なので、値を true に変更
        isDrag = true;
    }
});
// マップをタップし指を離したときに実行される
$("#map").on('touchend', function (e) {
    if(!isDrag){
        // 画面から指を離した際に実行したい処理
        // 例:マップピンを移動する など
    }
    isDrag = false;
});

もしかしたらもっといい方法があるのかもしれませんが…意図していた通り、「ドラッグ中は地図のドラッグだけを行い、タップした時のみマップピンが移動する」という処理ができたので、これでOKということにします。

 

touchstart、touchend、touchmove の3つをご紹介しましたが、単なるタッチイベントなら、一番最初の touchstart だけ覚えておけば正直問題なさそうな気もしますね。

  • この記事いいね! (0)
村上 著者:村上

【jQuery】要素を削除する.remove()と.empty()の違い

JavaScriptで要素を削除するメソッドに、.empty().remove()があります。
どちらも要素を削除する、という点では同じなのですが、挙動が少し違うので、これを機にまとめてみました。

.remove()
こちらは単純に指定した要素そのものを削除します。
例としては下記のように要素が指定されていた時に、

<ul id="list01">
    <li id="item01">item01</li>
    <li id="item02">item02</li>
    <li id="item03">item03</li>
</ul>
/* javascript */
$("#item01").remove();

上記のJavaScriptを実行すると、idに「item01」が指定された li 要素が削除されるというもの。
指定する要素は、id だけでなく、勿論classでもOKです。
なお、class を指定した場合は、一致する class がすべて削除されます。

 

.empty()
こちらは指定した要素の中にある子要素を削除します。
サンプルコードは下記の通り。
id に「list01」が指定された ul 要素に対して、.empty() メソッドを指定すると、ul の子要素である li がすべて削除されます。

<ul id="list01">
    <li id="item01">item01</li>
    <li id="item02">item02</li>
    <li id="item03">item03</li>
</ul>
/* javascript */
$("#list01").empty();

.empty() メソッドについては、「指定した要素の中身を空にする」と覚えるとわかりやすいかな。
なお、あくまでも指定した要素の子要素を削除するメソッドなので、指定した親要素自身は残ります。

 

簡単にではありますが、大きな違いはこんな感じ。
.remove() は単純明快なので、ある特定の要素を消す、というときに使用します。
一方で .empty() については、一度リストなどを再描画する際、ul などは残しつつ、リストの項目である li だけを削除する、というときに使えます。
以前投稿した、要素を追加するメソッドとセットで覚えるのがおすすめですね。

【備忘録】jQueryの要素追加のメソッド一覧
https://cpoint-lab.co.jp/【備忘録】jqueryの要素追加のメソッド一覧/

特に .empty() については、.append() とセットで覚えると、様々な処理やより扱いやすいかと思います。

  • この記事いいね! (0)
村上 著者:村上

【備忘録】jQueryの要素追加のメソッド一覧

現在開発中のWebシステムでjQueryでの要素追加メソッドを使うことがあったのですが、すぐに忘れてしまうのでまとめてみました。
ちなみに私は、.after()や.before()などは、名前の通りのメソッドなのでわかりやすいし覚えやすいのですが、.append().prepend()あたりを忘れやすいです。

 

.after()

$('div').after('追加要素');

一番わかりやすいし、使いやすいので、比較的利用頻度が高めなメソッドです。
指定した要素のすぐ後ろに、要素を追加します。

上のコードを実行するとこんな感じになります。
なお、今回掲載しているサンプルコードでは、div要素に対して、p要素を追加しています。

<div>基準となるdiv要素</div>
<p>追加したp要素</p>  <!-- after()で追加したp要素 -->

 
似たようなメソッドとして、.insertAfter()があります。

$('追加要素').insertAfter('div');

実行結果は、上で記載した.after()と同じになります。
追加したい要素と、追加の基準となる要素の順番が逆になるので、こちらは少し分かりにくい印象を受けます。

 

.before()

$('div').before('追加要素');

こちらは.after()と似ていますが、指定した要素のすぐ前に要素を追加するメソッドです。
分かりやすいですが、今まで書いたコードの中ではそこまで使用頻度は高くなかったです。
 

<p>追加したp要素</p>  <!-- before()で追加したp要素 -->
<div>基準となるdiv要素</div>

 
こちらのbeforeにも、似たようなメソッドとして、.insertBefore()があります。

$('追加要素').insertBefore('div');

こちらの実行結果は、上で記載した.before()と同じになります。

 

.append()

$('div').appand('追加要素');

こちらも良く使うメソッド。
指定した要素の中に、要素を追加します。
 

<div>
    <b>元々記述してあったb要素</b>
    <p>追加したp要素</p>  <!-- append()で追加したp要素 -->
</div>

なお、要素を追加するときは、指定した要素(今回はdiv要素)の一番後ろに要素が追加されます。
 
似たようなメソッドとしては、.appendTo()があります。

$('追加要素').appendTo('div');

実行結果は上で記載した.append()のサンプルと同じ結果になります。

 

.prepend()

$('div').before('追加要素');

こちらは.append()メソッドと似ていますが、指定した要素の一番前に要素が追加されます。
 

<div>
    <p>追加したしたp要素</p>  <!-- prepend()で追加したp要素 -->
    <b>元々記述してあったb要素</b>
</div>

こちらは使用頻度は低め、というかまだ実際に使ったことはないですね。
 
こちらにも似たようなメソッドとして、.prependTo()があります。

$('追加要素').prependTo('div');

実行結果は上で記載した.prepend()のものと同じです。

 

ざっくりとまとめましたが、要素を追加するメソッドとしてはこのあたりを知っていればいいかと思います。
他にも.wrap()メソッドという、指定した要素で対象の要素を囲むメソッドもありますが、こちらは使う機会はあまりないかと思い、割愛させていただきました。
もし間違っている場合は、そっとご指摘をお願いします。

  • この記事いいね! (0)