1

ここで奇妙なもの。touchmove以前、私が構築している iOS Web アプリケーションでデフォルトの動作を防止することをいじっていました。イベント リスナーを追加して伝播を防ぐのは簡単ですが、デフォルトの動作をその子の 1 つに戻す必要があります。私が理解しているように、親が無効になっているため、子はイベントを登録しません。

だから私は解決策が必要です。

基本的に、多くのスワイプが行われているため、デフォルトのボディ スクロール動作をノックアウトする必要があります。スワイプしながらスライドするページは腹立たしい。当然、イベント リスナーを外側のコンテナーに追加する必要があります。それを避けることはできません。

子の 1 つにデフォルトのブラウザ制御動作を戻すにはどうすればよいですか? 私は自分の物理学とすべてでそれを偽造したくありません。

ご協力いただきありがとうございます。

HTML:

<div id="mainPanel"> <!-- add event listener and preventDefault(); -->
    <div id="nonScrollingPanel></div>
    <div id="scrollingPanel></div> <!-- add event listener and re-enable default -->
</div>

JavaScript:

$bod.on('touchmove', '#mainPanel', function(event){

    event.preventDefault();
});

$('#mainPanel').on('touchmove', '#scrollingPanel', function(){

    return true;
});
4

2 に答える 2

0

簡単に言えば、最も簡単な方法はpreventDefault()、子でないかどうかを前に確認することです。

プレーン JS の例:

HTML:

<div id="parent">
    parent
    <div id="child">
        child
    </div>
</div>​

JS:

var parent = document.getElementById('parent');

parent.addEventListener('click', function(e) {
    // Gets closest div
    var div = function closest(el) {
        if (el.tagName === 'DIV') {
            return el;
        }
        else {
            return closest(el.parentNode);
        }
    }(e.target);

    if (div.id !== 'child') {
        e.preventDefault();
    }
});

Jsfiddle の例: http://jsfiddle.net/Ralt/yxxmx/

あなたの例に従うと、次のようになります。

$bod.on('touchmove', '#mainPanel', function(event){
    if ($(event.target).closest('div')[0].id !== 'scrollingPanel') {
        event.preventDefault();
    }
});
于 2012-12-21T10:49:35.117 に答える
0

これが期待どおりに機能しない理由は、いずれかで伝播を停止しない限り、jQuery がすべてのイベント ハンドラーを実行するためです。あなたの例では、両方のイベント ハンドラーが実行されます。

ここに 1 つの解決策がありますが、実際には別の目的でイベントを伝播させたい場合があるため、私は好きではありません。

$('#main-panel').on('touchmove', function(e) {
    e.preventDefault();
});

$('#scrolling-panel').on('touchmove', function(e) {
    e.stopPropagation();
});​

iOSにページのスライドを無効にする特別なメタタグがない限り、私は次のようにします:

$('#main-panel').on('touchmove', function(e) {
    if (!$('#scrolling-panel')[0].contains(e.target)) {
        e.preventDefault();
    }
});
于 2012-12-21T11:10:34.600 に答える