jQuery "在鼠标移动时"在鼠标离开框架时不滑动

我想用jquery制作一个滑块。但当我把它从"silderContainer"框架中拉出时，"滑块"将停止移动，当它通过"sliderContainer"返回时，"滑动器"将再次移动。我想要的是当我把鼠标拉出框架时"滑块"是如何移动的。

这里的代码：

<style>
    body{
        padding:60px;
        height:800px;
    }
    .sliderContainer{
        //position:relative;
        width:200px;
        background-color:#CCC;
        height:30px;
        margin-top:16px;
        cursor:pointer;
    }
    .slider{
        position:absolute;
        width:50px;
        height:30px;
        background:#fa565a;
        float:right;
    }
</style>

</head>
<body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(document).on('ready', function(){
        function moveSlider(e){
            e.preventDefault();
            var pos = $(e.currentTarget).offset()
            ,   posX    = e.pageX - pos.left;
            if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){
                $('.slider').css('width', posX+'px');

            }
        }
        $('.sliderContainer').on('mousedown', function(e){
            moveSlider(e);
            $(this).on('mousemove', function(e){
                moveSlider(e);
            });
        }).on('mouseup', function(){
        $(this).off('mousemove');
        });
    });
    </script>
    <div class='sliderContainer'>
        <div class='slider'></div>
    </div>
</body>

如有任何帮助，我们将不胜感激。非常感谢。

这是因为目标元素是.sliderContainer。所以这样想吧——当你在网页上，将鼠标按住任何普通形式的按钮，然后将鼠标移入或移出时，焦点就会丢失在对象上。

http://www.w3schools.com/html/html_forms.asp

查找"提交按钮"部分并进行测试。

您的逻辑是，当焦点在容器元素上并且注册了鼠标移动事件时，javascript可以对其做出响应。但一旦焦点丢失（例如，移动到元素的区域之外），它就无法再做出响应。

您可以将事件注册到文档或窗口，或后面有较大空间的另一个对象，而不是将事件附加到容器元素本身，以便保持焦点。

以下是一个示例：如果释放不在同一元素上，则丢失MouseUp事件

相关内容

最新更新

热门标签：