Question

我的jquery代码中的touchstart有问题。使用手机打开页面时，我的jquery代码不允许我单击任何按钮，输入或其他元素。

请点击此 DEMO 。您可以单击输入，然后可以在上面输入内容。但是，现在打开chrome开发者控制台，点击输入框，即可在此处看到问题。您不能单击输入框。您不能输入名字和姓氏。

这是什么问题，我该如何解决？任何人都可以在这里帮助我吗？

(function(b) {
  b.fn.XSwitch = function(d) {
    return this.each(function() {
      var f = b(this),
        e = f.data("XSwitch");
      if (!e) {
        e = new c(f, d);
        f.data("XSwitch", e);
      }
      if (b.type(d) === "string") {
        return e[d]();
      }
    });
  };

  b.fn.XSwitch.defaults = {
    selectors: {
      sections: ".sections",
      section: ".section",
      page: ".pages",
      active: ".active"
    },
    index: 0,
    easing: "ease",
    duration: 500,
    loop: false,
    pagination: true,
    keyboard: true,
    direction: "vertical",
    callback: ""
  };

  var a = (function(e) {
    var h = ["webkit", "moz", "o", "ms"],
      g = "";
    for (var f = 0, d = h.length; f < d; f++) {
      g = h[f] + "Transition";
      if (e.style[g] !== undefined) {
        return "-" + h[f].toLowerCase() + "-";
      }
      return false;
    }
  })(document.createElement("div"));

  var c = (function() {
    function g(j, i) {
      this.settings = b.extend(true, b.fn.XSwitch.defaults, i);
      this.element = j;
      this.init();
    }

    g.prototype = {
      init: function() {
        var i = this;
        this.selectors = this.settings.selectors;
        this.sections = this.element.find(this.selectors.sections);
        this.section = this.sections.find(this.selectors.section);
        this.direction = this.settings.direction === "vertical" ? true : false;
        this.pagesCount = this.pagesCount();
        this.index =
          this.settings.index >= 0 && this.settings.index < this.pagesCount ?
          this.settings.index :
          0;
        this.canScroll = true;
        if (!this.direction) {
          d(i);
        }
        if (this.settings.pagination) {
          h(i);
        }
        f(i);
      },
      pagesCount: function() {
        return this.section.length;
      },
      switchLength: function() {
        return this.duration ? this.element.height() : this.element.width();
      },
      prve: function() {
        var i = this;
        if (this.index > 0) {
          this.index--;
        } else {
          if (this.settings.loop) {
            this.index = this.pagesCount - 1;
          }
        }
        e(i);
      },
      next: function() {
        var i = this;
        if (this.index < this.pagesCount) {
          this.index++;
        } else {
          if (this.settings.loop) {
            this.index = 0;
          }
        }
        e(i);
      }
    };

    function d(k) {
      var j = k.pagesCount * 100 + "%",
        i = (100 / k.pagesCount).toFixed(2) + "%";
      k.sections.width(j);
      k.section.width(i).css("float", "left");
    }

    function h(o) {
      var n = o.selectors.page.substring(1),
        l = '<ul class="' + n + '">';
      o.activeClass = o.selectors.active.substring(1);
      for (var m = 0, k = o.pagesCount; m < k; m++) {
        l += "<li></li>";
      }
      l += "</ul>";
      o.element.append(l);
      var j = o.element.find(o.selectors.page);
      o.pageItem = j.find("li");
      o.pageItem.eq(o.index).addClass(o.activeClass);
      o.section.find('.box').removeClass('box_active');
      o.section.eq(o.index).find('.box').addClass('box_active');
      if (o.direction) {
        j.addClass("vertical");
      } else {
        j.addClass("horizontal");
      }
    }

    function f(i) {
      i.element.on("click touchstart", i.selectors.page + " li", function() {
        i.index = b(this).index();
        e(i);
      });
      i.element.on("mousewheel DOMMouseScroll", function(j) {
        if (!i.canScroll) {
          return;
        }
        var k = -j.originalEvent.detail ||
          -j.originalEvent.deltaY ||
          j.originalEvent.wheelDelta;
        if (k > 0 && ((i.index && !i.settings.loop) || i.settings.loop)) {
          i.prve();
        } else {
          if (
            k < 0 &&
            ((i.index < i.pagesCount - 1 && !i.settings.loop) ||
              i.settings.loop)
          ) {
            i.next();
          }
        }
      });

      i.element.on("touchstart", function(l) {
        var k = l.originalEvent.changedTouches[0].pageX,
          j = l.originalEvent.changedTouches[0].pageY;
        i.element.one("touchend", function(o) {
          if (!i.canScroll) {
            return;
          }
          var n = o.originalEvent.changedTouches[0].pageX,
            m = o.originalEvent.changedTouches[0].pageY,
            p = m - j;
          if (p > 50) {
            i.prve();
          } else {
            if (p < -50) {
              i.next();
            }
          }
        });
        l.preventDefault();
      });

      if (i.settings.keyboard) {
        b(window).on("keydown", function(k) {
          var j = k.keyCode;
          if (j === 37 || j === 38) {
            i.prve();
          } else {
            if (j === 39 || j === 40) {
              i.next();
            }
          }
        });
      }

      b(window).resize(function() {
        var j = i.switchLength(),
          k = i.settings.direction ?
          i.section.eq(i.index).offset().top :
          i.section.eq(i.index).offset().left;
        if (Math.abs(k) > j / 2 && i.index < i.pagesCount - 1) {
          i.index++;
        }
        if (i.index) {
          e(i);
        }
      });

      i.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function() {
        i.canScroll = true;
        if (i.settings.callback && type(i.settings.callback) === "function") {
          i.settings.callback();
        }
      });
    }

    function e(l) {
      var i = l.section.eq(l.index).position();
      l.section.find('.box').removeClass('box_active');
      l.section.eq(l.index).find('.box').addClass('box_active');

      if (!i) {
        return;
      }

      l.canScroll = false;
      if (a) {
        l.sections.css(
          a + "transition",
          "all " + l.settings.duration + "ms " + l.settings.easing
        );
        var j = l.direction ?
          "translateY(-" + i.top + "px)" :
          "translateX(-" + i.left + "px)";
        l.sections.css(a + "transform", j);
      } else {
        var k = l.direction ? {
          top: -i.top
        } : {
          left: -i.left
        };
        l.sections.animate(k, l.settings.duration, function() {
          l.canScroll = true;
          if (l.settings.callback && type(l.settings.callback) === "function") {
            l.settings.callback();
          }
        });
      }
      if (l.settings.pagination) {
        l.pageItem
          .eq(l.index)
          .addClass(l.activeClass)
          .siblings("li")
          .removeClass(l.activeClass);
      }
    }
    return g;
  })();

  $(function() {
    $("[data-XSwitch]").XSwitch();
  });
})(jQuery);

$("#container").XSwitch({
  duration: 1000
});

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

#container,
.sections,
.section {
  position: relative;
  height: 100%;
}

.section {
  background-color: #000;
  background-size: cover;
  background-position: 50% 50%;
}

#section0 {
  background-image: url(https://unsplash.it/1980/1280?image=1076);
}

#section1 {
  background-image: url(https://unsplash.it/1980/1280?image=1075);
}

#section2 {
  background-image: url(https://unsplash.it/1980/1280?image=1074);
}

#section3 {
  background-image: url(https://unsplash.it/1980/1280?image=1073);
}

.pages {
  position: fixed;
  right: 10px;
  top: 50%;
  list-style: none;
}

.pages li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  margin: 15px 0 0 7px;
}

.pages li.active {
  margin-left: 0;
  width: 14px;
  height: 14px;
  border: 4px solid #FFFFFF;
  background: none;
}

.form {
  left: 50%;
  margin-left: -400px;
  position: absolute;
  top: 50%;
  width: 800px;
  margin-top: -241px;
  padding: 20px 30px 30px;
  z-index: 5;
  vertical-align: baseline;
  animation: signupFormIntro 0.3s ease-out 0.7s;
  animation-fill-mode: backwards;
}

.input_box {
  width: 100%;
  display: inline-block;
}

.wellcome_input {
  width: 100%;
  padding: 15px;
  font-weight: 300;
  font-size: 16px;
  outline: none;
  border: 0px solid transparent;
  color: #444;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-xswitch="">
  <div class="sections">
    <div class="section box" id="section0">
      <div class="form">
        <div class="input_box"><input type="text" class="wellcome_input" placeholder="First Name"></div>
        <div class="input_box"><input type="text" class="wellcome_input" placeholder="Last Name"></div>
      </div>
    </div>
    <div class="section" id="section1"></div>
    <div class="section" id="section2"></div>
    <div class="section" id="section3"></div>
  </div>
</div>

Answer 1

如果您触摸文本输入，那么所有父元素也会被触摸。

在这种情况下，当您触摸文本输入时也会触摸user_obj.is_authenticated。 i.element正在阻止l.preventDefault()及其所有子级的默认行为。导致未激活文本输入。

删除i.element。无论如何，我认为没有必要。

我复制并编辑了您的CodePen，以便您可以看到它的工作原理！

l.preventDefault()

Answer 2

l.preventDefault();阻止了其他默认事件的触发。如果删除它，您的代码应该可以使用。

我无法从移动设备上的输入写入任何值

2 个答案: