Framework7 stopPropagation解决方案

Framework7 stopPropagation solution

本文关键字：解决方案 stopPropagation Framework7      更新时间：2023-09-26

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

问题似乎出在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示例。

相关文章：