0

http://jsfiddle.net/p168uLv2/3/

ここに、私の問題を伴う私の jsFiddle が表示されます。クリックハンドラーにボタンがあり、ボタンを押すと、ボタンが含まれているdivにもクリックが登録されます。jQuery を使用すると、Propagaton を停止できるため、これは発生しませんが、framework7 では機能しません。

<div data-link="level1" class="limodeknop">
     <div class="overlay"></div>
     <div class="modeknop">
          <div class="titel">
             <lrmodenaam>Level 1</lrmodenaam>
             <lrsubmode>Tutorial</lrsubmode>
          </div>
          <div class="knoppenbalk displaynone">
           <div data-link="solo" class="solo btn">Solo</div>
 </div>
</div>
</div>

そしてJavascript：

var $$ = Dom7;

$$(document).on('click',"[data-link=level1]", function(){
    console.log("li clicked");

    $$(this).find(".knoppenbalk").toggleClass("displaynone");

});

$$(document).on('click',"[data-link=solo]", function(e){
    console.log("solo BUTTON clicked");
    e.stopPropagation();
});
4

1 に答える 1

2

問題は、Framework7 のイベント バインドの実現にあるようです。「クリック」イベントがルート ドキュメントのノードに到達すると、両方のコールバックが起動します。したがって、このステップでの「stopPropagation」は役に立ちません。

「stopImmediatePropagation」を使用できますが、この場合、クリック ハンドラーを正しい順序で配置する必要があります。注意してください。'stopImmediatePropagation' は、要素にバインドされた他のすべてのハンドラーを阻止するため、'document' をターゲットとして使用しないでください。

また、バブル ステップで「stopPropagation」を使用して同じ効果を得ることができます。

var $$ = Dom7;
$$('.limodeknop')
  .on('click', "[data-link=solo]", function (e) {
    console.log("solo BUTTON clicked");
    e.stopImmediatePropagation();
});
$$('.limodeknop')
  .on('click', "[data-link=level1]", function () {
    console.log("li clicked");
    $$(this)
  .find(".knoppenbalk")
  .toggleClass("displaynone");
});

私のCodePenの例。

于 2015-12-04T22:41:26.110 に答える