Framework7 stopPropagation решение

Question

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(); 
}); 

Answer 1

кажется, что проблема заключается в реализации Framework7 о связывании событий. Оба callbacks срабатывают, когда событие «click» достигает узла корневого документа. Поэтому «stopPropagation» на этом этапе бесполезен.

Вы можете использовать «stopImmediatePropagation», но в этом случае вам необходимо организовать обработчики кликов в правильном порядке. Будьте осторожны: «stopImmediatePropagation» предотвратит все другие обработчики, привязанные к элементу, поэтому не используйте «документ» в качестве цели.

Также можно использовать «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 пример.