父元素设置mouseover监听事件并用e.target操作父元素样式会覆盖子元素mouseover监听事件的this样式？

Question

父元素设置mouseover监听事件并用e.target操作父元素样式会覆盖子元素mouseover监听事件的this样式？

发布于
2019-03-26

代码如下

<body>
    <div class="d1">
        <div class="d2"></div>
    </div>
</body>
<script>
    var a = document.getElementsByClassName('d1')[0];
    var b = document.getElementsByClassName('d2')[0];
    a.addEventListener('mouseover', function (e) {
        e.target.style.backgroundColor = 'yellow';
        console.log('a');
    })
    b.addEventListener('mouseover', function (e) {
        console.log('b');
        this.style.backgroundColor = '#333';
    })
</script>

鼠标先移到a位置再移到b位置

然后全部变成黄色

求解答，谢谢~

javascript

html5 css html

阅读 3.5k

1 个回答

得票最新

攻城狮Lee丶

2.8k3833

发布于
2019-03-26

首先说下mouseover和mouseenter这两个鼠标经过的事件。
在没有子元素的情况下两个事件没有区别，当有子元素的时候mouseover在经过子元素时依然触发相应的事件，mouseenter则不会再子元素上触发事件。
所以把mouseover换成mouseenter。