求大神解答。我的需求是鼠标移到名叫but1的div上时，id叫k的div渐变出现到按钮下方。
现在的问题是div上有个a标签，鼠标移动到a标签上的字体时就重复触发移出移入事件。
经过百度查明就是a标签引起的。求大神解答，有什么办法解决
<!-- 鼠标移动到某个菜单上时,下方显示指针提示
var k = document.getElementById("k");
for(var num = 0;num<5;num++){
var d = document.getElementById("but"+num);
d.addEventListener('mouseover',function(){
var left = this.offsetLeft+this.offsetWidth/2-30;
<!--console.log(k.style.display);-->
k.style.left = left + "px";
<!--k.style.display="block";
<!--$("#k").fadeIn(350);-->
});
d.onmouseout = function(){
k.style.display="none";
<!--$("#k").fadeOut(350);-->
}
}

我猜是由于冒泡引起的，在事件处理程序中需要调用 even. stopPropagation()

结构改一下 把那两个包起来
比如 li来做鼠标移入一开事件
<ul>
<li><input id="btn1" type="button" value="按钮"><div id="k"><a href="#">测试</a></div></li>
</ul>

检测鼠标移除有两种可监听的事件
mouseout mouseleave
你用的是 mouseout ，它有个缺点：
当指针进入或离开元素的子元素时同样会触发该事件，子元素事件的冒泡会触发父元素的监听器。对于 mouseout 如果不想子元素的事件触发影响到父元素就得把父元素下一级的所有子元素进行阻止冒泡。
而 mouseleave 就省心多了，它只会在鼠标移出被监听元素的范围时触发，且不会冒泡。
考虑到你的需求，推荐你用 mouseleave ✔而不是 mouseout ✘。

d.addEventListener('mouseover', function(){
const left = this.offsetLeft + this.offsetWidth / 2 - 30;
k.style.left = left + 'px';
k.style.display = "block";
}, true);
设置第三个参数为true试试

监听事件写最外面，循环事件写里面，你这个逻辑外面循环里面监听，肯定会重复触发呀