javascript - Framework7停止传播解决方案

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对事件绑定(bind)的实现上。当“单击”事件到达根文档的节点时，这两个回调都会触发。所以这一步的“stopPropagation”是没有用的。

您可以使用“stopImmediatePropagation”，但在这种情况下，您必须按正确的顺序排列点击处理程序。请注意，“stopImmediatePropagation”将阻止绑定(bind)到该元素的所有其他处理程序，因此不要使用“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示例。