jQuery でのマウスダウンおよびマウスアップ イベント応答の問題解決

最近、Web ページの音楽プレーヤーのプレイリストが完成しました。私のアイデアは次のとおりです: $("#pulley") .mousedown による最後の
プログレス バー ドラッグ効果だけが残っています。 Eventこのコントロールにmousemoveイベントをバインドし、mouseup中にmousemoveイベントのバインドを解除しますが、イベントのトリガーが常に失敗することがあり、これは厄介です。上記のコード

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

要素mousedownは、Bind 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");
});

mine これが意味するのは、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;
    };

考慮すべき点は 2 つあると思います。まず、マウスがターゲット領域の外に移動すると、
ブラウザがドラッグイベントをサポートしていない場合、カーソルがターゲット領域の外に移動すると、mouseup イベントを監視できなくなるため、mouseleave イベントを考慮する必要があります。ブラウザはドラッグ イベントをサポートしています。テストしてみたところ (Chrome 53、申し訳ありません。理由はわかりません。他のブラウザでは)、mousedown イベントがトリガーされた後、マウスがどこに移動している限りドラッグ イベントがトリガーされることがわかりました。マウスが移動すると、マウス ボタンが放されている限り、dragend イベントがトリガーされます。 概要: ブラウザがドラッグ イベントをサポートしている場合は、ドラッグ イベントを直接使用します。サポートされていない場合は、4 つのイベント リスナーを作成する必要があります。同時に。

以上がjQuery でのマウスダウンおよびマウスアップ イベント応答の問題解決の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。