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

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<nodes.length;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.length;i++){

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

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

        }(i)

    }

}

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

<img  :src="imgUrl">

data(){

    return{

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

    }

}

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

解决方案:加require

data(){   

    return{         

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

}

(后续不定时更新...)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,895评论 1 11
  • $HTML, HTTP,web综合问题 1、前端需要注意哪些SEO 2、 的title和alt有什么区别 3、HT...
    Hebborn_hb阅读 10,118评论 0 20
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 7,490评论 0 25
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 7,259评论 0 2
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 8,193评论 1 10

友情链接更多精彩内容