Question

我想用jquery创建一个滑块。但当我把它拉出框架＆＃34; silderContainer＆＃34;，＆＃34;滑块＆＃34;将停止移动，当它通过＆＃34; sliderContainer＆＃34;，＆＃34;滑块＆＃34;将再次移动。我想要的是＆＃34; slider＆＃34;当我将鼠标从框架中拉出时仍然移动。

这里是代码：

<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>

非常感谢任何帮助。谢谢。

Answer 1

这是因为目标元素是.sliderContainer。所以想想这样 - 当你在网页上并且将鼠标按住任何普通表格按钮然后将鼠标移入和移出它时，焦点就会丢失在对象上。

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

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

你的逻辑说的是，当焦点在于容器元素并且注册了鼠标移动事件时，javascript可以响应它。但是一旦焦点丢失（例如，移动到元素区域之外），它就不能再响应了。

不是将事件附加到容器元素本身，而是可以将它们注册到文档或窗口，或者在其后面有更大空间的其他对象，以便保持焦点。

这是一个例子： Losing MouseUp event if releasing not over the same element

当鼠标离开框架时，jQuery'on mousemove'不会滑动

1 个答案: