Mousedownイベントとmousemoveイベントを同時にトリガーするjQueryのtitle属性について詳しく説明します。

マウス クリックの イベント 全体の実行プロセスは次のとおりであることはよく知られています。マウスダウン -> マウスアップ -> ドラッグ アンド ドロップのプロセス全体は次のとおりです。 ; 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属性には特性があり、マウスを押すとプロンプトテキストが非表示になり、マウスを上げると再び表示されるので、ダブルクリックしてみてください。 2 回目のクリックでクリック イベントがトリガーされることがわかります。1 回クリックした後、タイトルが表示される前に 2 回目にクリックすると、クリック イベントが通常どおりトリガーされます。

これを発見した後は、この小さな問題を回避するように努めることができます。場合によっては、オブジェクトにはドラッグアンドドロップとクリックの両方の機能が必要になる可能性があり、これら2つの機能が競合しないようにする必要があるためです。最も簡単な方法は、title 属性の使用を避けることです。または、HoorayOS での私の実装を参照することもできます。

マウスダウン時とマウスアップ時のオブジェクトの座標をそれぞれ記録し、それらが完全に一致している場合、それはオブジェクトが一致していることを意味します。ドラッグされていない場合、オブジェクトがドラッグされたことを意味します。このとき、マウスアップでは 2 つの状況を別々に処理できます。

追記: この問題は現在 chrome でのみ発生しており、他のブラウザでは発生しないようです。

以上がMousedownイベントとmousemoveイベントを同時にトリガーするjQueryのtitle属性について詳しく説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。