0

我一直在制作一个网页，并且我有一个需要一些 javascript 的功能（使固定的 div 可滚动），我找到了一种让它与 jquery 一起工作但没有它就无法工作的方法。任何帮助，将不胜感激。这是代码：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
  // A globar variable to save to last element that the following class was applied to
  var Last;
  // This adds the class "ttth" so that tt the class "tt" will be displayed.
  $(".tttw").live('touchstart', function() {
    if (Last) Last.removeClass('ttth');
    $(this).addClass("ttth");
    Last=$(this);
  });
  // Test if we have a touchdevice.
  function isTouchDevice(){
    try{
      document.createEvent("TouchEvent");
      return true;
    }catch(e){
      return false;
    }
  }
  // This function makes a fixed div on touch devices scrollable.
  function touchScroll(selector) {
    if (isTouchDevice()) {
      var scrollStartPosY=0;
      var scrollStartPosX=0;
      $('body').delegate(selector, 'touchstart', function(e) {
        scrollStartPosY=this.scrollTop+e.originalEvent.touches[0].pageY;
        scrollStartPosX=this.scrollLeft+e.originalEvent.touches[0].pageX;
      });
      $('body').delegate(selector, 'touchmove', function(e) {
        if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
          this.scrollTop+e.originalEvent.touches[0].pageY < scrollStartPosY-5) ||
          (this.scrollTop != 0 && this.scrollTop+e.originalEvent.touches[0].pageY > scrollStartPosY+5))
          e.preventDefault();
        if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
          this.scrollLeft+e.originalEvent.touches[0].pageX < scrollStartPosX-5) ||
          (this.scrollLeft != 0 && this.scrollLeft+e.originalEvent.touches[0].pageX > scrollStartPosX+5))
          e.preventDefault();
        this.scrollTop=scrollStartPosY-e.originalEvent.touches[0].pageY;
        this.scrollLeft=scrollStartPosX-e.originalEvent.touches[0].pageX;
      });
    }
  }
  // Touch is being initialised.
  $(document).ready(function(){
    touchScroll('.tt');
  });
</script>

这段代码已经在工作，但为了减少加载时间，我想摆脱 jQuery。怎么做？例如 - 我如何选择所有类“tttw”并添加一个事件监听器？

任何帮助，粗略的方向等都会很棒！

4

1 回答 1

0

好的 - 我自己找到了答案。我是这样做的：

function touchScrolli(selector) {
    if (isTouchDevice()) { 
    var scrollStartPosY=0;
    var scrollStartPosX=0;
    var list = document.querySelectorAll(selector);
    for (var i = 0; i < list.length; i++) {
    list[i].addEventListener('touchstart', function (e) {
    scrollStartPosY=this.scrollTop+e.touches[0].pageY;
    scrollStartPosX=this.scrollLeft+e.touches[0].pageX;
    e.preventDefault();
    }, false);
    list[i].addEventListener('touchmove', function (e) {
    if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
    vthis.scrollTop+e.touches[0].pageY < scrollStartPosY-5) ||
    (this.scrollTop != 0 && this.scrollTop+e.touches[0].pageY > scrollStartPosY+5))
    e.preventDefault();
    if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
    this.scrollLeft+e.touches[0].pageX < scrollStartPosX-5) ||
    (this.scrollLeft != 0 && this.scrollLeft+e.touches[0].pageX > scrollStartPosX+5))
    e.preventDefault();
    this.scrollTop=scrollStartPosY-e.touches[0].pageY;
    this.scrollLeft=scrollStartPosX-e.touches[0].pageX;
    });
    }
    }
}

只需要知道如何在没有 jQuery 的情况下选择所有类。

于 2012-11-27T22:14:05.247 回答