平时遇到的问题总结,怕忘记记录在这儿,方便自己平时翻看,也想尽自己的绵薄之力帮助大家,欢迎大家提出宝贵的建议。
直接上问题:
一、今天用原生的js写点击事件触发的冒泡
html:
<div class="zuzhi">
<button type="button" value="阻止事件流">阻止事件流</button>
</div>
javascript:
var zvzhi=document.getElementsByClassName('zuzhi');
var zuzhi_btn=document.getElementsByTagName('button');
zvzhi.onclick=function(){
alert("外面的div");
};
zuzhi_btn.onclick=function(){
alert("里面的button");
}
怎么点击都没反应,检查也通过类名和标签名获取到了div元素和button元素但是点击没效果。经过上网百度搜索知道,
因为编译器认为class可以重复,或许会有多个元素class都是相同的,直接换成document.getElementById()就行了,或者给document.getElementsByClassName()设置index,例如document.getElementsByClassName(‘div’)[0].onclick()就OK,
var zvzhi=document.getElementsByClassName('zuzhi')[0];
var zuzhi_btn=document.getElementsByTagName('button')[0];
zvzhi.onclick=function(){
alert("外面的div");
};
zuzhi_btn.onclick=function(){
alert("里面的button");
}
很久不写原生了,竟然忘记了,看来知识得经常回顾的。