web-dev-qa-db-ja.com

jQueryのmouseupイベントはタッチデバイスで機能しますか？

答えが見つからなかったので、ここで質問します。現在、私はタッチデバイスを所有していないため、テストできません。

次のコードは、コンテナの外側をクリックすると、コンテナ内のすべてのサブコンテナを非表示にします。

$(document).mouseup(function(e) {
  var container = $('#container');
  if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
  {
    $('.subcontainer').hide();
  }
});

これはタッチデバイスで機能しますか、それともタッチデバイスにmouseupに相当するものがありますか？

jquerymouseup
16
Rafff

いいえ、機能しません。しかし、ここにtouchstartとtouchendのイベントがあります。

$(document).bind( "mouseup touchend", function(e){
  var container = $('#container');
  if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
  {
    $('.subcontainer').hide();
  }
});
33
dknaack

このスレッドを最新（つまり2019）にするために、jQueryはバージョン3で「バインド」を非推奨にしたことに注意してください。

今日、Androidで「thumb-slider」（つまり、入力要素、type = 'range'）を最初にテストしたとき、イベント関数の名前がそれぞれmousemoveとmouseupであったため、失敗しました。

私は単にそれらを次のように変更しました：

$（ '＃sliderID'）。on（ 'touchmove mousemove'、function（event）{...}および$（ '＃sliderID'）。on（ 'touchend mouseup'、function（event）{...}およびこれで、webappはPC（Windows-10）とAndroid（v7.1）の両方で動作します。私のjQueryバージョンは3.3.1です。

（これらは私がテストに利用できる唯一の2つのプラットフォームですが、これはすべての主要なブラウザーで機能すると確信しています。Chrome、Opera、Firefox、およびEdge-on-Win10で成功しています）

0
Dave