ボーダータッチボタン：アクティブになっているが発射イベントは発生していない

Question

現在、[小さな]タッチスクリーンUIを作成中です。私は、ボタンが実際に押されていないので、ユーザが誤ってボタンの端にちょうど当たってアクティブなCSSトリガを持つことができますが、touchendイベントは発生しないという問題に遭遇しています。

ここでは、黄色のボックスは指のクリックであり、ボタンはアクティブな状態ですが、イベントをアクティブにしません。ここで

だけでなく、それはここで

.action-button { 
    @extend .nav-button; 
    height: 85%; 
    border-radius: $border-radius; 
    border: none; 
    min-width: 85px; 
    margin: { 
    left: 5px; 
    right: 5px; 
    top: 5px; 
    } 
    font-weight: bold; 
} 
.nav-button { 
    &.active { 
    background-color: $active-button-background-color; 
    } 
    &:last-of-type { 
    margin-right: 10px; 
    } 
} 
.nav-button:active { 
    background-color: $active-button-background-color; 
} 

関連性の中で、場合SCSSであるあなたにもhttps://jsfiddle.net/kaagu3dj/12/これで遊ぶことができるようにフィドルある[あなたがする必要があります注意してくださいタッチシミュレーターモード]

TL、DR、このエッジタッチをボタンで「キャプチャ」するにはどうすればよいでしょうか？

ありがとうございます！

Answer 1

これは、touchendとtouchstartイベントのネイティブ動作です。 こういうこともできます。

：アクティブ疑似クラスのCSSを削除し、以下のようにスクリプトを追加してください。

let count = 0; 
$('.main').on('touchstart', function(event) { 
    count++; 
    $('#count').html(count); 
    $('.main').css("background", "blue"); 
}); 
$('.main').on('touchend', function(event){ 
    $('.main').css("background", "#ddd"); 
}); 

これはあなたに役立つかもしれません。 fiddle