Detaillierte Erläuterung des Titelattributs in jQuery, das bewirkt, dass das Mousedown-Ereignis und das Mousemove-Ereignis gleichzeitig ausgelöst werden.

Wie wir alle wissen, lautet der Ausführungsprozess des gesamten -Ereignisses : Mousedown -> Mouseup -> Mousemove -> Mouseup -> Click

Sie können eine normale Demo sehen, Sie können Klick- und Drag-and-Drop-Aktionen separat testen

$(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;
    });
});

Wir versuchen, den Titel hinzuzufügen Attribut zu #box Probieren wir das Klickereignis und das Drag-and-Drop-Ereignis separat aus

$(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;
    });
});

Sie können feststellen, dass durch Klicken auch das Mausbewegungsereignis ausgelöst wird, und der Grund ist der Titel.

Und das Titelattribut hat eine Eigenschaft: Wenn Sie die Maus drücken, wird der Eingabeaufforderungstext ausgeblendet und beim Anheben der Maus wieder angezeigt, sodass Sie einen Doppelklick versuchen können , und Sie werden feststellen, dass der zweite Klick das Klickereignis auslöst, da der zweite Klick erfolgt, bevor der Titel angezeigt wird. Nach dem ersten Klick wird das Klickereignis normal ausgelöst.

Nachdem wir dies entdeckt haben, können wir versuchen, dieses kleine Problem zu vermeiden, da in einigen Fällen ein Objekt möglicherweise sowohl über Drag-and-Drop- als auch über Klickfunktionen verfügen muss und diese beiden Funktionen sicherstellen muss wird nicht in Konflikt geraten. Der einfachste Weg besteht darin, die Verwendung des Titelattributs zu vermeiden, oder Sie können sich auf meine Implementierung in HoorayOS beziehen:

Zeichnen Sie die Koordinaten des Objekts beim Mousedown bzw. Mouseup auf und vergleichen Sie sie bedeutet, dass das Objekt nicht verschoben wurde, andernfalls bedeutet es, dass das Objekt gezogen wurde. Zu diesem Zeitpunkt können Sie diese beiden Situationen in MouseUp separat behandeln.

　PS: Dieses Problem tritt derzeit nur unter chrome auf und scheint in anderen Browsern nicht aufzutreten.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Titelattributs in jQuery, das bewirkt, dass das Mousedown-Ereignis und das Mousemove-Ereignis gleichzeitig ausgelöst werden.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!