javascript - Framework7 stopPropagation 解决方案

Question

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

在这里，您会看到我的 jsFiddle 伴随着我的问题。我在点击处理程序中有一个按钮，当我按下按钮时，点击也注册在按钮所在的 div 上。使用 jQuery，您可以 stopPropagaton 这样就不会发生这种情况，但在 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对事件绑定的实现上。当“点击”事件到达根文档的节点时，这两个回调都会触发。所以这一步的'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示例。