关于html中的span的onclick和css的问题

Question

<div id="tit" style="width: 500px;"><h2 class="h2font">呼叫系统走势图</h2>
<button onclick="tab1();">切换1</button><button onclick="tab2();">切换2</button><button onclick="tab3();">切换3</button>
<div class="drawTab"><span class="span1" onclick="tab1();">月度</span><span class="span2" onclick="tab2();">季度</span><span class="span3" onclick="tab3();">年度</span></div></div>
<div id="container" style="height: 100%;"></div>
源码是想实现通过span的onclick来切换echarts的图表，刚开始用button测试成功，在button存在的时候点击span的区域测试也成功，但是去掉button后span的active和hover事件全部失效，onclick也失效，但是在页面加载的时候，span的active和hover是存在的。不懂是什么原因，求大神解答

Answer 1

将event.stopPropagation(); 加在那几个函数里

Answer 2

浏览器f12调试