jQuery의 mousedown 및 mouseup 이벤트 응답에 대한 문제 해결

최근에 웹페이지용 음악 플레이어의 재생 목록을 완성했는데 슬라이더의 마지막 진행률 표시줄 드래그 효과만 남았습니다.
By $("#pulley") .mousedown Eventmousemove 이벤트를 이 컨트롤에 바인딩한 다음 mouseup 중에 mousemove 이벤트 바인딩을 해제하지만 이벤트 트리거가 때때로 작동하여 괴로운 일이 발생합니다. 위 코드

  $("#pulley").mousedown(function(){
            $("#pulley").bind("mousemove", function(e){
                $("#debug").text("start");
                setschdule(e);
            });
        });
        $("*").mouseup(function(){
            $("#pulley").unbind("mousemove");
            $("#debug").text("test");
        });

mousedown 요소는 mousemove 이벤트를 document에 바인딩해야 합니다. 또는 body, mouseup도 document 또는 body에 바인딩해야 합니다

해봤습니다. 마우스가 컨트롤에서 멀어지면 mouseleave 이벤트가 발생합니다.. 내 개념과 다릅니다

$("#pulley").mousedown(function () {
    //此处绑定document
    $(document).bind("mousemove", function (e) {
        $("#debug").text("start");
        setschdule(e);
    });
});
$(document).mouseup(function () {
    //同上
    $(document).unbind("mousemove");
    $("#debug").text("test");
});

이것은 mousemove가 그렇지 않다는 의미입니다. 페이지에 묶여 있으면 손이 흔들리고 요소 밖으로 이동하면 이벤트가 중지됩니다.

   
$("#pulley").mousedown(function(){
            $(document).bind("mousemove", function(e){
                $("#debug").text("start");
                setschdule(e);
            });
        });
        $(document).mouseup(function(){
            $("#pulley").unbind("mousemove");
            $("#debug").text("close");
        });

시도해 보았으나 나중에 문서에서 이벤트 바인딩을 해제할 수 없는 것 같습니다. 그러면 슬라이더가 작동하지 않습니다.

번들 해제되어야 합니다. $(document).unbind("mousemove");

네이티브 드래그 이런 코드를 고려해 볼 수도 있습니다

oDiv2.onmousedown = function(ev){
        var ev = ev || window.event;
        disY = ev.clientY - oDiv2.offsetTop;
         
        document.onmousemove = function(ev){
            var ev = ev || window.event;
             
            var T = ev.clientY - disY;
             
            scrollBar(T);
             
        };
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    };

두 가지 고려해야 할 사항이 있습니다.
1. , 마우스가 대상 영역 밖으로 이동하는 경우
브라우저가 드래그 이벤트를 지원하지 않는 경우 커서가 대상 영역 밖으로 이동하면 mouseup 이벤트를 모니터링할 수 없으므로 mouseleave 이벤트를 고려해야 합니다. 드래그 이벤트를 지원합니다. 테스트한 결과(chrome 53, 죄송합니다. 다른 브라우저에서는) mousedown 이벤트가 트리거된 후 마우스가 움직이는 동안 드래그 이벤트가 트리거되는 것으로 나타났습니다. 이동하면 마우스 버튼을 놓는 동안 dragend 이벤트가 트리거됩니다. 요약: 브라우저가 드래그 이벤트를 지원하는 경우 드래그 이벤트를 직접 사용해야 합니다. 같은 시간.

위 내용은 jQuery의 mousedown 및 mouseup 이벤트 응답에 대한 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!