在vue中使用时stopImmediatePropagation可以让事件立即结束,而stopPropagation有时会循环,这点十分重要。

如下示例:

$(".content-ul").on("click", ".img-li", function (e) {
  e.stopImmediatePropagation();
  if ($(".content-ul .img-li").length < 5) {//
    $(this).addClass("current-click").siblings().removeClass("current-click");
    return false;
  }
  if (!clickFlag) {
    //layer.msg("对不起,你操作太快了,我跟不上呀",{time:1500,icon:5});
    return false;
  }
  clickFlag = false;

  var perInterval = 476;//每张图的大小
  var theTransitionDuration = 0.5;//过渡时间
  var $this = $(this);
  var $thisParent = $this.parent();
  var _index = $this.index();//当前点击的元素索引
  var currentPickindex = $thisParent.children(".current-click").index();
  var maxLength = $thisParent.children().length;
  if (_index == 2 && $this.hasClass("current-click")) {//点中间图则放最大
    clickFlag = true;
    //layer.msg("亲,中间这个你可不能点哦。",{time:1500,icon:5});
    var currentClickImgSrc = $.trim($this.find("img").attr("src"));
    vm.openFullScreenPage(currentClickImgSrc);
    return false;
  } else if (_index == (currentPickindex + 1)) {//往前点翻转

以上示例,如果用stopPropagation时,第一次点击时会有两次click回调触发,

导致当_index从1变为2时,就进了这个流程:

if (_index == 2 && $this.hasClass("current-click")) 
Logo

前往低代码交流专区

更多推荐