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'' )
}
(后续不定时更新...)