複数のプラットフォームでHTMLボタンのリリースを確実に検出する

Question

私は単純なように思っています：divがクリックされたりタッチされている間にdivを緑に変えてください。 （つまり、本質的に、任意の秒数の間押されることができるボタン）である。

私はほとんどが、それはこのフィドルで働いています https://jsfiddle.net/lrodgi/66gramjh/

私は（これはほとんど作品を）やって何が、リリースのためのmouseupとtouchendイベントをリッスンするだけです：

jbtn.on('mousedown touchstart', function(event) { 
    onPressed(); 
}); 

$(document).on('mouseup touchend', function() { 
    onReleased(); 
}); 

これはコンピュータでうまくいきますが、モバイルブラウザではしばらくの間保持されたコンテキストメニューが表示されなくなります。そこで、私が通過表示されているメニューを防ぐ：これらで

function onContextMenu(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    event.stopImmediatePropagation(); 
    return false; 
} 

jbtn.on('contextmenu', onContextMenu); 

を、すべてのデスクトップブラウザで、モバイルChromeで正常に動作するようです。しかし、それでもFirefox Mobileでは正常に動作しません。

Firefoxモバイルでは、divを数秒間押し続けてもメニューは表示されませんが、「touchcancel」イベントが発生します。トゥーチェンドやマウスアップではありません。したがってdivは決して解放されません。

これは完全に機能すると思いますか？

私はjavascriptライブラリを使用しても構いません。実際、jQuery Mobileのvmouseupとvmousedownイベントは成功しませんでした（数秒後にtouchcancelが発生すると、vmouseupが発生しなくなります）。

Answer 1

CSS pseudo selectors:activeと:focusはどうですか？

#btn { 
    background-color: green; 
} 
#btn:active, #btn:focus { 
    background-color: red; 
} 

.all { 
 
    // Just in case. 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    -webkit-touch-callout: none; 
 
    user-select: none; 
 
    touch-callout: none; 
 
} 
 

 
#btn { 
 
    background-color: green; 
 
} 
 
#btn:active, #btn:focus { 
 
    background-color: red; 
 
}

<div class="all"> 
 
    <div id="btn" class="released" style="width: 50px; height: 50px"> 
 
    </div> 
 
</div>

Answer 2

問題の根本は、 'コンテキストメニュー' イベントをインターセプトするとき、Firefoxのモバイルで、 'touchcancel' イベントが発生していた、ということでした。

私は現在、Firefoxモバイルで、JavaScriptからのコンテキストメニューを防止すると同時に、実際のタッチが終了する（「touchcancel」が発生した後に「touchend」が発生しない）ことを検出する方法が見つかっていませんユーザーがまだタッチを保持している場合でも）。

しかし、私が見つけた回避策は、ユーザー選択を使用して<img>タグ（長押しで保存画像コンテキストメニューにつながる）を避けることによって、「コンテキストメニュー」の予防が不要であることをCSSを介して保証することです。などのコピー＆ペーストのコンテキストメニューを回避するためになし、

一見作業スニペット：

function onPressed() { 
 
    $("#btn").addClass("pressed"); 
 
    $("#btn").removeClass("released"); 
 
} 
 

 
function onReleased() { 
 
    $("#btn").addClass("released"); 
 
    $("#btn").removeClass("pressed"); 
 
} 
 

 
var jbtn = $("#btn"); 
 

 
jbtn.on('mousedown touchstart', function(event) { 
 
\t onPressed(); 
 
}); 
 

 
$(document).on('mouseup touchend', function() { 
 
    onReleased(); 
 
}); 
 

 
jbtn.on('mouseup mouseleave touchend', function() { 
 
    onReleased(); 
 
});

.all { 
 
    // Just in case. 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    -webkit-touch-callout: none; 
 
    user-select: none; 
 
    touch-callout: none; 
 
} 
 

 
.pressed { 
 
    background-color: red; 
 
} 
 

 
.released { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="all"> 
 
    <div id="btn" class="released" style="width: 50px; height: 50px"> 
 
    </div> 
 
</div> 
 

 
<textarea> 
 
    Just testing 
 
</textarea>

私が切り替えるために必要な場合であることは注目に値しますdivの背景色を切り替える代わりにn <img>を使用すると、このソリューションはそのまま動作しません。 （イメージの保存ダイアログがポップアップし、contextmenuイベントを使用してそれを防ぐことはできませんでした）。