Fatal编程技术网
  • javascript/
  • Javascript HTML快速按钮工作示例

Javascript HTML快速按钮工作示例

javascript html

Javascript HTML快速按钮工作示例,javascript,html,Javascript,Html,我正在尝试实现通过Google找到的快速按钮代码，并且： 目前，我收到一个未捕获的TypeError:无法读取null的属性'addEventListener'。有人能告诉我如何实现这个快速按钮逻辑和/或addEventListener吗 答：在页面元素加载后定义新按钮 <html> <head> <title>Button</title> <script src="/js/fastbutton.js"></script>

我正在尝试实现通过Google找到的快速按钮代码，并且：

目前，我收到一个未捕获的TypeError:无法读取null的属性'addEventListener'。有人能告诉我如何实现这个快速按钮逻辑和/或addEventListener吗

答：在页面元素加载后定义新按钮

<html>
<head>
<title>Button</title>
<script src="/js/fastbutton.js"></script>
<script type="text/javascript">
new FastButton(document.getElementById('fastButton'), function() {
    num = num + 1;
    document.getElementById("outputText").value = num;
});

var num = 0;

function slowButton() {
    num = num + 1;
    document.getElementById("outputText").value = num;
}
</script>
</head>
<body>
Output: <input id="outputText" type="text"></input>
<button id="fastButton">Fast Button</button>
<button onclick="slowButton();">Slow Button</button>
</body>
</html>


按钮
新的FastButton（document.getElementById（'FastButton'），function（）{
num=num+1；
document.getElementById（“outputText”）.value=num；
});
var num=0；
函数slowButton（）{
num=num+1；
document.getElementById（“outputText”）.value=num；
}
输出：
快速按钮
慢按钮
JS代码：

(function() {
  /** 
   * From: http://code.this.com/mobile/articles/fast_buttons.html
   * Also see: https://stackoverflow.com/questions/6300136/trying-to-implement-googles-fast-button 
   */

  /** For IE8 and earlier compatibility: https://developer.mozilla.org/en/DOM/element.addEventListener */
  function addListener(el, type, listener, useCapture) {
    if (el.addEventListener) { 
Uncaught TypeError: Cannot read property 'addEventListener' of null
      el.addEventListener(type, listener, useCapture);
      return { 
        destroy: function() { el.removeEventListener(type, listener, useCapture); } 
      };
    } else {      
      // see: https://stackoverflow.com/questions/5198845/javascript-this-losing-context-in-ie
      var handler = function(e) { listener.handleEvent(window.event, listener); }
      el.attachEvent('on' + type, handler);

      return { 
        destroy: function() { el.detachEvent('on' + type, handler); }
      };
    }   
  }

  var isTouch = "ontouchstart" in window;

  /* Construct the FastButton with a reference to the element and click handler. */
  this.FastButton = function(element, handler, useCapture) {
    // collect functions to call to cleanup events 
    this.events = [];
    this.touchEvents = [];
    this.element = element;
    this.handler = handler;
    this.useCapture = useCapture;
    if (isTouch) 
      this.events.push(addListener(element, 'touchstart', this, this.useCapture));    
    this.events.push(addListener(element, 'click', this, this.useCapture));
  };

  /* Remove event handling when no longer needed for this button */
  this.FastButton.prototype.destroy = function() {
    for (i = this.events.length - 1; i >= 0; i -= 1)
      this.events[i].destroy();    
    this.events = this.touchEvents = this.element = this.handler = this.fastButton = null;
  };

  /* acts as an event dispatcher */
  this.FastButton.prototype.handleEvent = function(event) {
    switch (event.type) {
      case 'touchstart': this.onTouchStart(event); break;
      case 'touchmove': this.onTouchMove(event); break;
      case 'touchend': this.onClick(event); break;
      case 'click': this.onClick(event); break;
    }
  };

  /* Save a reference to the touchstart coordinate and start listening to touchmove and
   touchend events. Calling stopPropagation guarantees that other behaviors don’t get a
   chance to handle the same click event. This is executed at the beginning of touch. */
  this.FastButton.prototype.onTouchStart = function(event) {
    event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
    this.touchEvents.push(addListener(this.element, 'touchend', this, this.useCapture));
    this.touchEvents.push(addListener(document.body, 'touchmove', this, this.useCapture));
    this.startX = event.touches[0].clientX;
    this.startY = event.touches[0].clientY;
  };

  /* When /if touchmove event is invoked, check if the user has dragged past the threshold of 10px. */
  this.FastButton.prototype.onTouchMove = function(event) {
    if (Math.abs(event.touches[0].clientX - this.startX) > 10 || Math.abs(event.touches[0].clientY - this.startY) > 10) {
      this.reset(); //if he did, then cancel the touch event
    }
  };

  /* Invoke the actual click handler and prevent ghost clicks if this was a touchend event. */
  this.FastButton.prototype.onClick = function(event) {
    event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
    this.reset();
    // Use .call to call the method so that we have the correct "this": https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call
    var result = this.handler.call(this.element, event);
    if (event.type == 'touchend') 
      clickbuster.preventGhostClick(this.startX, this.startY);    
    return result;
  };

  this.FastButton.prototype.reset = function() {
    for (i = this.touchEvents.length - 1; i >= 0; i -= 1) 
      this.touchEvents[i].destroy();    
    this.touchEvents = [];
  };

  this.clickbuster = function() {}

  /* Call preventGhostClick to bust all click events that happen within 25px of
   the provided x, y coordinates in the next 2.5s. */
  this.clickbuster.preventGhostClick = function(x, y) {
    clickbuster.coordinates.push(x, y);
    window.setTimeout(clickbuster.pop, 2500);
  };

  this.clickbuster.pop = function() {
    clickbuster.coordinates.splice(0, 2);
  };

  /* If we catch a click event inside the given radius and time threshold then we call
   stopPropagation and preventDefault. Calling preventDefault will stop links
   from being activated. */
  this.clickbuster.onClick = function(event) {
    for (var i = 0; i < clickbuster.coordinates.length; i += 2) {
      var x = clickbuster.coordinates[i];
      var y = clickbuster.coordinates[i + 1];
      if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
        event.preventDefault ? event.preventDefault() : (event.returnValue=false);
      }
    }
  };

  if (isTouch) {
    // Don't need to use our custom addListener function since we only bust clicks on touch devices
    document.addEventListener('click', clickbuster.onClick, true);
    clickbuster.coordinates = [];
  }
})(this);

（函数（）{
/** 
*发件人：http://code.this.com/mobile/articles/fast_buttons.html
*另见：https://stackoverflow.com/questions/6300136/trying-to-implement-googles-fast-button 
*/
/**对于IE8和早期版本的兼容性：https://developer.mozilla.org/en/DOM/element.addEventListener */
函数addListener（el、类型、侦听器、useCapture）{
如果（el.addEventListener）{
未捕获的TypeError:无法读取null的属性“addEventListener”
el.addEventListener（类型、侦听器、useCapture）；
返回{
destroy:function（）{el.removeEventListener（type，listener，useCapture）；}
};
}否则{
//见：https://stackoverflow.com/questions/5198845/javascript-this-losing-context-in-ie
var handler=function（e）{listener.handleEvent（window.event，listener）；}
el.attachEvent（'on'+类型，处理程序）；
返回{
destroy:function（）{el.detachEvent（'on'+类型，处理程序）；}
};
}   
}
窗口中的var isTouch=“ontouchstart”；
/*使用对元素的引用构造FastButton，然后单击handler*/
this.FastButton=函数（元素、处理程序、useCapture）{
//收集调用清理事件的函数
this.events=[]；
this.touchEvents=[]；
this.element=元素；
this.handler=handler；
this.useCapture=useCapture；
如果（isTouch）
this.events.push（addListener（元素'touchstart'，this，this.useCapture））；
this.events.push（addListener（元素'click'，this，this.useCapture））；
};
/*不再需要此按钮时删除事件处理*/
this.FastButton.prototype.destroy=函数（）{
对于（i=this.events.length-1；i>=0；i-=1）
this.events[i].destroy（）；
this.events=this.touchEvents=this.element=this.handler=this.fastButton=null；
};
/*充当事件调度器*/
this.FastButton.prototype.handleEvent=函数（事件）{
开关（事件类型）{
案例“touchstart”：this.onTouchStart（事件）；break；
案例“touchmove”：this.onTouchMove（事件）；break；
案例“touchend”：this.onClick（事件）；break；
案例“单击”：this.onClick（事件）；break；
}
};
/*保存对touchstart坐标的引用，并开始收听touchmove和
调用stopPropagation可以保证其他行为不会™我得不到
处理相同点击事件的机会。这在触摸开始时执行*/
this.FastButton.prototype.onTouchStart=函数（事件）{
event.stopPropagation？event.stopPropagation（）：（event.cancelBubble=true）；
this.touchEvents.push（addListener（this.element，'touchend'，this，this.useCapture））；
this.touchEvents.push（addListener（document.body，'touchmove'，this，this.useCapture））；
this.startX=event.touchs[0].clientX；
this.startY=event.touchs[0].clientY；
};
/*调用touchmove事件时/如果调用touchmove事件，请检查用户是否拖过10px的阈值*/
this.FastButton.prototype.onTouchMove=函数（事件）{
if（Math.abs（event.touchs[0].clientX-this.startX）>10 | | Math.abs（event.touchs[0].clientY-this.startY）>10）{
this.reset（）；//如果他这样做了，则取消触摸事件
}
};
/*如果这是touchend事件，则调用实际的单击处理程序并防止重影单击*/
this.FastButton.prototype.onClick=函数（事件）{
event.stopPropagation？event.stopPropagation（）：（event.cancelBubble=true）；
这是reset（）；
//使用.call调用该方法，以便获得正确的“this”：https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call
var result=this.handler.call（this.element，event）；
如果（event.type=='touchend'）
clickbuster.preventGhostClick（this.startX，this.startY）；
返回结果；
};
this.FastButton.prototype.reset=函数（）{
对于（i=this.touchEvents.length-1；i>=0；i-=1）
this.touchEvents[i].destroy（）；
this.touchEvents=[]；
};
this.clickbuster=函数（）{}
/*调用preventGhostClick以取消25像素内发生的所有单击事件
在接下来的2.5秒内提供的x，y坐标*/
this.clickbuster.preventGhostClick=函数（x，y）{
点击buster.coordinates.push（x，y）；
设置超时（clickbuster.pop，2500）；
};
this.clickbuster.pop=函数（）{
点击按钮。坐标。拼接（0，2）；
};
/*如果我们在给定的半径和时间阈值内捕捉到一个点击事件，那么我们调用
stopPropagation和preventDefault。调用preventDefault将停止链接
从被激活*/
this.clickbuster.onClick=函数（事件）{
对于（变量i=0；i