前端常见问题汇总 (JS)

1. git运行出现: Bower : ENOGIT git is not installed or not in the PATH

1)  如果没安装git 则 需要安装git for windows。 并且安装时候选择Use Git from the windows Command prompt （默认过来是勾选的）。

2)  如果安装了git， 那么则需要设置到PATH 。

          $ PATH

  添加git路径（我的是默认安装路径）

          $ set PATH=%PATH%;C:\Program Files\Git\bin

     再次运行即可

2. H5长按事件
1> 用定时器模拟
<div style="width:100%;">
    <div id="box" style="width:90px; height:200px;border:1px solid red; font-size:20px">click</div>
</div>
<script>
    var timer=0;
    $(function(){
        $("#box").on({
            touchstart: function(e){
                timer = setTimeout("notice()",100);
                e.preventDefault();
            },
            touchmove: function(){
                clearTimeout(timer);
                timer= 0;
            },
            touchend: function(){
                clearTimeout(timer);
                if(timer!=0){
                    alert("click");
                }
                return false;
            }
        })
    });

    function notice(){
        timer= 0;
        alert("长按");
    }

</script>
3. resize , scroll 等事件 触发频次太高解决方法。
var resizeTimer = null; 
$(window).on('resize', function () { 
	if (resizeTimer) { 
		clearTimeout(resizeTimer) 
	} 
	resizeTimer = setTimeout(function(){ 
		//todo			
	}, 400); 
});

4. IE9 下面 输入框无法响应 Backspace键删除  剪切 粘贴 事件解决方法

   这里引用 buzinas 写的一个IE9-oninput-polyfill脚本 。github地址 : IE9-oninput-polyfill

  原理 ：

    

(function (d) {
  if (navigator.userAgent.indexOf('MSIE 9') === -1) return;
  var elements = [], values = [], ev = d.createEvent('CustomEvent');
  ev.initCustomEvent('input', true, true, {});

  d.addEventListener('selectionchange', function() {
    var actEl = d.activeElement;

    if (actEl.tagName === 'TEXTAREA' || (actEl.tagName === 'INPUT' && actEl.type === 'text')) {
      var idx = elements.indexOf(actEl), el = elements[idx] || elements.push(actEl);
      if (el.value !== values[idx]) {
        values[idx] = el.value;
        el.dispatchEvent(ev);
      }
    }
  });
})(document);

5. IE及火狐等浏览器下（谷歌除外）keyup绑定输入框输入中文的时候， 输入的字还在输入法里面，但是已经触发了keyup事件 ，并且无法处理

   复制粘贴等。 这时候可以使用 oninput 和 onprotoperty 事件 。 可以如下判断 ：

if('onpropertychange' in document.createElement('input')){
     //IE
      $(selector)[0].onproperty = function(){}          
} else {
     //非IE
      $(selector)[0].oninput = function(){}
      //$(selector).keyup(function(){});           
 }

至于IE9的bug 解决方法见4

6. IOS下click失效解决的方法 

	
	

		将 click 事件直接绑定到目标元素（即 .target）上
	

	

		将目标元素换成 <a> 或者 button 等可点击的元素
	

	

		将 click 事件委托到非 document 或 body 的父级元素上
	

	

		给目标元素加一条样式规则 cursor: pointer; 
	


7.touchend太容易触发的解决方法

this.$el.on('touchstart', '.page', function (e) {
                e.preventDefault();
                self.current = e.currentTarget;
                // 按下手指的y坐标
                self.startY = e.originalEvent.changedTouches[0].pageY;
                // 移动时的scrollTop
                self.scrollTop = self.current.scrollTop;
                e.stopPropagation();
            });
            this.$el.on('touchmove', '.page', function (e) {
                e.preventDefault();
                // 手指移动的距离 正为向上滑动 负为向下滑动
                self.distance = self.startY - e.originalEvent.changedTouches[0].pageY;
                self.current.scrollTop = self.scrollTop + self.distance;
                // 是否滚动的标记位
                if (self.distance > 4) {
                    self.scrolling = true;
                }
                e.stopPropagation();
            });
            this.$el.on('touchend', '.page', function (e) {
                e.preventDefault();
                self.scrolling = false;
                e.stopPropagation();
            });

判断 this.scrolling 即可

8. 判断滚动条滚动到底部

需要三个属性：

1. scrollHeight : 可以滚动的区域(总区域);

2. scrollTop : 已经滚动的高度;

3. clientHeight : 可视区域的高度;

滚动到底部: scrollHeight - (clientHeight + scrollTop) === 0;

9. 数字千分位格式化 

function toQfw(n){
  var str_n=n.toString();
  var result="";
  while(str_n.length>3){
    result=","+str_n.slice(-3)+result;
    str_n=str_n.slice(0,str_n.length-3)
  }
  if(str_n){
    console.log(str_n+result)
  }
};

toQfw(1235466555)