クリックしてドラッグするとjQuery mouseupイベントが発生する

ユーザーがボックスをクリックすると、divを表示しようとしています。私はクリックしてドラッグすると、mouseupイベントはコールバックをトリガしませんクリックしてドラッグするとjQuery mouseupイベントが発生する

$(document).ready(function(){ 
    $(".hold").mousedown(function(){ 
    $(".box").css("height","200px"); 
    }); 
    $(".hold").mouseup(function(){ 
    $(".box").css("height","0px"); 
    }); 
});

しかし、コードの第二部：私はこのコードを使用しようとしました。

どのように動作させるには？

<!DOCTYPE html> 
<html> 
    <head> 
    <title>click and hold project</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
    <div class="hold"></div> 
    <div class="box"></div> 

    <script src="jquery-2.2.3.min.js"></script> 
    <script src="app.js"></script> 
    </body> 
</html>

出典

2016-05-05 VOLK 14

ボックスをクリックしてドラッグしたときに、ボックスを隠していても問題が残っていますか？これは、あなたが '.box'の中に「マウスオーバー」していないからです – wahwahwah

@wahwahwahがそれを指摘したように、問題は、あなたがして.hold要素上でマウスキーを押したときどこか別の場所にマウスを移動し、キーを残していることですmouseupの指定されたハンドラは、.hold要素に設定されているため呼び出されません。

技術的には、イベントのターゲットが異なるため、.hold要素と一致せず、最終的にはmouseupイベントのコールバック関数はトリガされません。

これを回避するには、最初にクリックされた要素へのポインタを追加してから、文書要素にイベントリスナーを追加し、event.targetがクリックされた要素と同じかどうかを確認することがあります。それらが同じでない場合は、次のよう

は、我々は、手動で.hold要素のイベントをトリガします：

$(document).ready(function(){ 
 
    var mouseTarget; 
 

 
    $(".hold").on('mousedown', function(){ 
 
    $(".box").css("height", "200px"); 
 
    mouseTarget = this; 
 
    }) 
 
    .on('mouseup', function(){ 
 
    $('.box').css("height", "0px"); 
 
    }); 
 

 
    $(document).on('mouseup', function(e) { 
 
    if (e.target !== mouseTarget) { 
 
     $(mouseTarget).trigger(e.type); 
 
    } 
 
    }); 
 
});

.hold{ 
 
    background-color: #000; 
 
    width: 20%; 
 
    height: 10px; 
 
} 
 
.box{ 
 
    background-color: #f00; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hold"></div> 
 
<div class="box"></div>

それは言及する価値があることdocumentに設定されているコールバック関数バブルフェーズでトリガーされます。

出典

2016-05-05 23:41:51

そのままhttps://jsfiddle.net/w47anse9/

出典

2016-05-05 22:26:53 reza

あなたのコードが動作する以下の

$(document).ready(function(){ 
    $(".hold").mousedown(function(){ 
    $(".box").css("height","200px"); 
    }) 
    .mouseup(function(){ 
    $(".box").css("height","0px"); 
    }); 
});

jsfiddleリンクを試してみてください。ボックスをドラッグまたは拡大しようとしていますか？私はそれにスタイルを加えました。ここで

.hold { 
    width: 50px; 
    height: 50px; 
    background-color: yellow; 
} 

.box { 
    width: 100px; 
    background-color: black; 
}

あなたのコードとフィドルです：jsfiddle

出典

2016-05-05 22:31:03 MaxKroshka

クリックしてドラッグするとjQuery mouseupイベントが発生する

答えて

関連する問題