多重滚动错误在HTML页面

Muiltiple Scroll Error in HTML Page

本文关键字：HTML 页面 错误 滚动      更新时间：2023-09-26

我有一个下面的html页面

<html>
    <head>
        <title> Test Page </title>
    </head>
    <body>
            <div id="testdiv" style="height:300px; width:200px; overflow:scroll;">
                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div                This is a sample div
                <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            </div>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
   </body>
</html>

我在本页添加了以下脚本

<script>
$( window ).scroll(function(){
    alert('Window Scroll');
});
$('#testdiv').scroll(function(){
    alert('testdiv Scroll');
});
</script>

它会提醒我哪个滚动动作被调用。

如果我滚动body，它会提示我Window Scroll

如果我在body内部的div中滚动它会提示我testdiv scroll, Window Scroll

但是它应该只提醒testdiv scroll为什么它提醒我2个滚动事件

try this

$('#testdiv').scroll(function(e){
    alert('testdiv Scroll');
    e.stopPropagation();
});

滚动事件弹出。请参阅什么是事件冒泡和捕获?查看事件冒泡解释

相关文章：