Explication détaillée de l'attribut title dans jQuery qui provoque le déclenchement simultané de l'événement mousedown et de l'événement mousemove.

Comme nous le savons tous, le processus d'exécution de l'ensemble de l' événement du clic de souris est : mousedown -> mouseup -> mousemove -> mouseup -> click

Vous pouvez voir une démo normale, vous pouvez tester les actions de clic et de glisser-déposer séparément

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

Nous essayons d'ajouter le titre attribut à #box Essayons séparément l'événement click et l'événement glisser-déposer

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

Vous pouvez constater que cliquer déclenchera également l'événement mousemove, et la raison est le titre.

Et l'attribut title a une caractéristique, c'est-à-dire que lorsque vous appuyez sur la souris, le texte d'invite sera masqué, puis il sera à nouveau affiché lorsque vous soulevez la souris, vous pouvez donc essayer de double-cliquer , et vous constaterez que le deuxième clic déclenchera l'événement de clic, car le deuxième clic est effectué avant que le titre ne soit affiché après le premier clic, l'événement de clic est déclenché normalement.

Après avoir découvert cela, nous pouvons essayer d'éviter ce petit problème, car dans certains cas, un objet peut avoir besoin d'avoir à la fois des fonctions glisser-déposer et cliquer, et s'assurer que celles-ci deux fonctions ne seront pas en conflit. Le moyen le plus simple est d'éviter d'utiliser l'attribut title, ou vous pouvez vous référer à mon implémentation dans HoorayOS :

Enregistrez les coordonnées de l'objet respectivement pendant mousedown et mouseup, et comparez-les si elles sont complètement cohérentes. signifie que l'objet n'a pas été mis à jour, sinon cela signifie que l'objet a été déplacé. À ce stade, vous pouvez gérer ces deux situations séparément dans mouseup.

　PS : Ce problème ne se trouve actuellement que sous chromeome, et ne semble pas se produire dans les autres navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!