web-dev-qa-db-ja.com

パッシブイベントリスナー内でデフォルトを防止できません

Framework7 sortable list を使用していますが、リストが変更されたときにイベントをトリガーしないという点だけでうまく機能します。

だから私はいくつかの組み込みイベントを試しています：

$('.sortable-handler').on('touchstart', function (e) {
    e.preventDefault();
    alert('touchstart');
});

$('.sortable-handler').on('touchmove', function (e) {
    e.preventDefault();
    console.log('touchmove');
});

$('.sortable-handler').on('touchcancel', function (e) {
    e.preventDefault();
    console.log('touchcancel');
});

$('.sortable-handler').mouseleave(function (e) {
    e.preventDefault();
    console.log('mouseleave');
});

..しかし、私が得るすべては：

ターゲットがパッシブとして扱われるため、パッシブイベントリスナー内でデフォルトを防止できません。 https://www.chromestatus.com/features/509356600721408 を参照してください

あらゆる種類の更新されたリストを取得するには、どのイベントを探す必要がありますか？

javascriptjqueryhtml-framework-7
36
3zzy

ユーザーが現在新しい要素を並べ替える要素をリリースしたときにFramework7で並べ替え可能なリストを処理するには、次のコードを使用できます。

  $$('li').on('sortable:sort',function(event){
    alert("From " + event.detail.startIndex + " to " + event.detail.newIndex);
  });

フィドル： https://jsfiddle.net/0zf5w4y7/

3
Agus Sapurta Sijabat

こちらをご覧ください ブログ投稿 。すべてのpreventDefaultでtouchstartを呼び出す場合、タッチスクロールを無効にするCSSルールも必要です。

.sortable-handler {
  touch-action: none;
}
58
Rick Byers

私のために

document.addEventListener("mousewheel", this.mousewheel.bind(this), { passive: false });

トリックをやりました（{ passive: false }部分）。

6
ranbuch