16732


表題の件につきましてOnsenUI最小テンプレを例に記述いたします。

まずindex.htmlを以下のように設定し、

[code]

    <ons-navigator var="myNavigator" page="page1.html" ng-controller="navControlle">
    </ons-navigator>
    
[/code]

page2.htmlを以下のように設定しています。

[code]

    <ons-page ng-controller="page2Controlle">
    <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Page 2</div>
    </ons-toolbar>
    
    <div style="text-align: center">
    
        <h1>Page 2</h1>
        <ons-button
            onclick="myNavigator.popPage()">
          Pop Page
        </ons-button>
    
    </div>
    <ons-list>
        <ons-gesture-detector>
            <ons-list-item class="hold" modifier="tappable">
                <p>リスト1</p>
            </ons-list-item>
            <ons-list-item class="hold2" modifier="tappable">
                <p>リスト2</p>
            </ons-list-item>
        </ons-gesture-detector>
    </ons-list>
    
[/code]

コントローラーを以下のように設定しています。

[code]

    <script>
        app = ons.bootstrap();
    
        app.controller('navControlle', function($scope) {
            $(document).on('hold', '.hold', function(){
                console.log("hoge");
            });
        });
    
        app.controller('page2Controlle', function($scope) {
            $(document).on('hold', '.hold2', function(){
                console.log("fuga");
            });
        });
    </script>
    
[/code]

page2.htmlに初めて遷移したときの「リスト1」「リスト2」を長押しした際の挙動は同じで、それぞれconsole.logが1回よばれるのですが、  
page2からpage1に戻って、再度page2に遷移したときに「リスト2」を長押しすると、holdが2回連続で呼ばれます。この時「リスト1」は1回しか呼ばれません。

再度page1にもどってpage2に、と繰り返して「リスト2」をクリックすると、今度はholdが3呼ばれ、どんどん呼ばれる回数が追加される挙動となります。

実際にはholdイベントにてpopupを表示する仕組みにしているのですが、連続的にイベントが発生してしまうため、呼び出される回数分popupが瞬間的に表示されてしまい困っております。

最悪navControlle内で処理すれば良いと思っていますが、できればページ毎にcontrollerを設定したいと考えております。

この事象の原因及び回避策についてご存知の方はいらっしゃいますでしょうか？


CC BY-SA 3.0
2015-09-17T23:28:45.940
16729
2015-09-18T00:13:27.120
2015-09-17T23:34:03.357
12358
12358
question
monaca onsen-ui angularjs
【monaca】pushPageで遷移後、ons-gesture-detectorで取得できるイベントの挙動について


page2.htmlを開くたびに`document`に対してイベントリスナが追加されていることが原因です。`document`ではなく`$element`から辿るようにしてはどうでしょうか。`$element`はpopPage時に破棄されるため、リスナが残存することはありません。

[code]

    ons.bootstrap()
    .controller('navController', function($scope) {
      $(document).on('hold', '.hold', function(){
        alert("hoge");
      });
    })
    .controller('page2Controller', function($scope, $element) {
      $element.on('hold', '.hold2', function(){
        alert("fuga");
      });
    });
[/code]

[code]

    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsen-css-components.css" rel="stylesheet"/>
    <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsenui.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/angular/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/onsenui.min.js"></script>
    
    <ons-navigator var="myNavigator" page="page1.html" ng-controller="navController">
    </ons-navigator>
    
    <ons-template id="page1.html">
      <ons-button style="margin: 100px;" ng-click="myNavigator.pushPage('page2.html')">Push</ons-button>
    </ons-template>
    
    <ons-template id="page2.html">
    <ons-page ng-controller="page2Controller">
    <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Page 2</div>
    </ons-toolbar>
    
    <div style="text-align: center">
    
        <h1>Page 2</h1>
        <ons-button
            onclick="myNavigator.popPage()">
          Pop Page
        </ons-button>
    
    </div>
    <ons-list>
        <ons-gesture-detector>
            <ons-list-item class="hold" modifier="tappable">
                <p>リスト1</p>
            </ons-list-item>
            <ons-list-item class="hold2" modifier="tappable">
                <p>リスト2</p>
            </ons-list-item>
        </ons-gesture-detector>
    </ons-list>
    </ons-page>
    </ons-template>
[/code]


CC BY-SA 3.0
2015-09-18T00:13:27.120
16732
2015-09-18T00:13:27.120
8532
16729
answer