mousedown 이벤트와 mousemove 이벤트가 동시에 발생하도록 하는 jQuery의 title 속성에 대한 자세한 설명입니다.

　우리 모두는 마우스 클릭의 전체 이벤트 실행 프로세스가 mousedown -> mouseup ->이고 드래그 앤 드롭의 전체 프로세스가 mousedown -> mouseup -> ; click

클릭 및 드래그 앤 드롭 동작을 별도로 테스트할 수 있는 일반 데모를 살펴보겠습니다.

$(function(){    //初始化 box 位置
    $('#box').css('left', ($(window).width() - 100) / 2).css('top', ($(window).height() - 100) / 2).show();    var x = y = 0;    var isMove = false;
    $('#box').mousedown(function(e){
        x = e.clientX - $('#box').offset().left;
        y = e.clientY - $('#box').offset().top;
        $(document).mousemove(function(e){
            $('#tip').text('你触发了 mousemove 事件');
            isMove = true;
            l = e.clientX - x;
            t = e.clientY - y;
            $('#box').css('left', l).css('top', t);
        }).mouseup(function(){
            $(document).unbind('mousemove').unbind('mouseup');
        });
    });
    $('#box').click(function(e){        if(!isMove){
            $('#tip').text('你触发了 click 事件');
        }
        isMove = false;
    });
});

#box에 titleattribute을 추가한 다음 클릭 이벤트와 드래그 앤- 각각 drop 이벤트

$(function(){    //初始化 box 位置
    $('#box').css('left', ($(window).width() - 100) / 2).css('top', ($(window).height() - 100) / 2).show();    var x = y = 0;    var isMove = false;
    $('#box').mousedown(function(e){
        x = e.clientX - $('#box').offset().left;
        y = e.clientY - $('#box').offset().top;
        $(document).mousemove(function(e){
            $('#tip').text('你触发了 mousemove 事件');
            isMove = true;
            l = e.clientX - x;
            t = e.clientY - y;
            $('#box').css('left', l).css('top', t);
        }).mouseup(function(){
            $(document).unbind('mousemove').unbind('mouseup');
        });
    });
    $('#box').click(function(e){        if(!isMove){
            $('#tip').text('你触发了 click 事件');
        }
        isMove = false;
    });
});

클릭하면 mousemove 이벤트도 발생하는 것을 알 수 있는데, 그 이유는 제목에 있습니다.

　 그리고 title 속성에는 특성이 있습니다. 즉, 마우스를 누르면 프롬프트 텍스트가 숨겨졌다가 마우스를 올리면 다시 표시되므로 더블클릭을 시도하면 됩니다. 두 번째 클릭이 클릭 이벤트를 트리거하기 때문에 두 번째 클릭이 클릭 이벤트를 트리거한다는 것을 알 수 있습니다. 한 번 클릭한 후 제목이 표시되기 전에 두 번째 클릭하면 클릭 이벤트가 정상적으로 트리거됩니다.

　이 사실을 발견한 후에는 이 작은 문제를 피하려고 노력할 수 있습니다. 어떤 경우에는 객체에 드래그 앤 드롭과 클릭 기능이 모두 있어야 하고 이 두 기능이 충돌하지 않도록 해야 하기 때문입니다. 가장 간단한 방법은 제목 속성을 사용하지 않는 것입니다. 또는 HoorayOS에서 구현한 내용을 참조할 수 있습니다.

마우스다운 및 마우스업 중에 개체의 좌표를 각각 기록하고 비교하면 개체가 완전히 일치한다는 의미입니다. 드래그되지 않았습니다. 그렇지 않으면 객체가 드래그되었다는 의미입니다. 이때 두 상황은 mouseup에서 별도로 처리될 수 있습니다.

　PS: 이 문제는 현재 chrome에서만 발견되며, 다른 브라우저에서는 나타나지 않는 것 같습니다.

위 내용은 mousedown 이벤트와 mousemove 이벤트가 동시에 발생하도록 하는 jQuery의 title 속성에 대한 자세한 설명입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!