I wrote a rotation graph to stop the rotation when hovering. I used the third parameter of the addEvnetListener implementation (onmouseenter/onmouseleave). I used true, that is, the event capture was executed, but this would go wrong. Every time I move the mouse in / out of the left and right arrows, the onmouseenter and onmouseleave events will be triggered again!
but as far as I understand it, the third parameter is true for event capture, and I am bound to the listening function in the outermost container. Why does my dom movement in the inner layer still trigger container listening events? Shouldn"t this be the result of bubbling?
the structure of dom is as follows
<body>
<div id="container" class="container">
<div class="pics">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3057381651,2463402979&fm=26&gp=0.jpg" alt="">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4117493074,4130557145&fm=26&gp=0.jpg" alt="">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=347260778,2859369145&fm=26&gp=0.jpg" alt="">
</div>
<a href="javascript：;" id="prev" class="arrow"><</a>
<a href="javascript：;" id="next" class="arrow">></a>
</div>
</body>then use js to write two functions, one is when the mouse moves away, the picture automatically plays, the left and right arrows disappear; when the mouse is over the picture, the picture automatically stops, and the left and right arrows appear clickable to move the left and right pictures.
the main js is as follows
play();
//
prev.onclick = function() {
animate(600);
}
//
next.onclick = function() {
animate(-600);
}
//stop
container.addEventListener("mouseenter",function () {
console.log("in");
prev.style.display = "block";
next.style.display = "block";
stop();
},true)
//play
container.addEventListener("mouseleave",function () {
prev.style.display = "none";
next.style.display = "none";
play();
},true)
//setInterval
function play() {
timer = setInterval(function(){
animate(-600);
}, 2000);
}
//clearInterval
function stop(){
clearInterval(timer);
}