Question

在这里你看到我的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的事件绑定实现中。当'click'事件到达根文档的节点时，两个回调都会触发。所以这一步'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示例。

Framework7 stopPropagation解决方案

1 个答案: