vue/js单击其他任意地方进行关闭窗口的操作

最新推荐文章于 2024-12-28 09:46:34 发布

原创最新推荐文章于 2024-12-28 09:46:34 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

Vue 同时被 2 个专栏收录

34 篇文章

订阅专栏

21 篇文章

订阅专栏

本文探讨了使用jQuery实现点击事件监听，通过判断点击目标来控制悬浮框的显示与隐藏，确保用户交互体验的同时，避免了悬浮框在不适当的时候出现。

  $("body").on("click", function(e) {
      // setTimeout(function() {
      // console.log(e.target);
      e.preventDefault();
      // console.log(e.target);
      // 触发该事件的直接元素
      var type = e.target;
      // 点击其他地方，悬浮框失去焦点隐藏,3种情况
      // 1、点击的不是作者名称；2、点击的不是悬浮框；3、点击的直接元素不是悬浮框内某一个子元素
      if (
        type.className != "media-detail-container" &&
        type.className != "swiper-pagination" &&
        type.className != "swiper-slide" &&
        type.className != "swiper-pagination-bullet" &&
        type.className != "swiper-slide-active" &&
        type.className != "center-imgList" &&
        $(e.target)
          .parents()
          .filter(".swiper-slide").length == 0
      ) {
        // console.log(1111111);
        _this.isShowImgBannerr = false;
        $(".adverts .shade ").css({
          visibility: "hidden"
        });
      }
      // }, 320);
    });