工作中遇到的问题以及解决方法

1.事件冒泡问题

问题描述：查询标签包含向下按钮图标，查询标签点击会触发出现loading，向下图标点击会触发绿框中时间版的显示隐藏，当点击图标的时候它父元素的点击事件出现loading，这是我不希望的

解决：（注意兼容IE）

function stopBubble(e){  //一般用在鼠标或键盘事件上  

    if(e && e.stopPropagation){  //W3C取消冒泡事件  

        e.stopPropagation(); 

     }else{  //IE取消冒泡事件  

        window.event.cancelBubble = true; 

     }  

};

2.问题描述：使用vue框架用v-if渲染元素后取不到这个元素，

产生原因：v-if中的条件不成立时不会预先渲染这个元素

解决方案：用v-show代替，v-show不论条件成不成立都会预先渲染这个元素就能取到

3.问题描述：vue框架axios请求数据get方法在ie8、9上只会请求一次

产生原因：axios请求数据get方法在ie8、9上存在缓存问题

解决方案：在请求地址后加一个时间戳参数     ?time=new Date().getTime()

4.问题描述：某些对象的属性有时会取不到，当再继续取这个不存在属性下的属性的时候会报错

obj.aa      //undefined

obj.aa.bb    //throw TypeError

产生原因：检索一个undefined值将会导致typeError异常

解决方案：通过&&符号避免，如：

obj.aa && obj.aa.bb    //undefined

5.问题描述：使用原生js的时候有时想自己添加一些方法方便复用

解决方案：给function.prototype增加方法对所有函数可用,比如给js中所有的string添加一个去除末尾空格的方法：

Function.prototype.method = function(name,func){

  if(!this.prototype[name]){

    this.prototype[name] = func;

  }

}

String.method('trim',function(){

    return this.replace(/^\s+|\s+$/g,'');

})

var str1 = 'test  ';

console.log(str1.trim());  //test

6.问题描述：用for循环给ul中的li绑定点击事件，点击li的时候弹出这个li的索引

var add_handler = function(nodes){

    var i;

    for(i=0;i

        node[i].onclick = function(e){ alert(i); }

    }

}

结果会弹出nodes.length-1次nodes.length

产生原因：

事件处理函数绑定了变量i(绑定时i的值已经变为nodes,length),而不是函数在构造时的i的值

解决方案：闭包

var add_handler = function(nodes){ 

    var i;

   for(i=0;i

        nodes[i].onclick = function(i){

            return function(e){ alert(e); }

        }(i)

    }

}

7.问题描述：vue框架使用v-for给img标签的src属性动态赋值，如下代码，会找不到图片

data(){

    return{

        imgUrl: ''../img/img1.png''

    }

}

产生原因：data中的imgUrl不会被webpack编译还是相对路径

解决方案：加require

data(){   

    return{         

        imgUrl: require(''../img/img1.png'' )

}

（后续不定时更新...）