jQuery Mouseup Ereignis beim Klicken und ziehen

Ich versuche, eine div zeigen, wenn der Benutzer auf ein Feld klicken. Ich hat versucht, diesen Code zu verwenden:jQuery Mouseup Ereignis beim Klicken und ziehen

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

Aber den zweiten Teil des Codes, das mouseup Ereignis den Rückruf nicht auslösen, wenn ich durch Klicken und Ziehen.

Wie funktioniert es?

<!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>

Quelle

2016-05-05 VOLK 14

Ist Ihr Problem, dass, wenn Sie klicken und ziehen Sie die Box bleibt, obwohl Sie möchten, dass es ausgeblendet wird? Es liegt daran, dass Sie in '.box' nicht" mousuppen " – wahwahwah

Wie @wahwahwah darauf hingewiesen, das Problem ist, dass, wenn Sie drücken Sie die Maustaste auf das .hold Element und dann mit der Maus irgendwo anders bewegen und den Schlüssel verlassen wird der angegebene Handler unter mouseup NICHT aufgerufen, da er auf das Element .hold gesetzt ist.

Technisch gesehen würde das Ziel des Ereignisses in diesem Fall anders sein, daher wird es nicht mit dem .hold Element übereinstimmen, und die Rückruffunktionen des mouseup Ereignisses werden schließlich nicht ausgelöst. Um dies zu umgehen, können Sie am Anfang einen Zeiger auf das angeklickte Element hinzufügen und dann einen Ereignis-Listener zum Dokumentelement hinzufügen und prüfen, ob event.target mit dem angeklickten Element übereinstimmt.

Wenn sie nicht gleich sind, löst man die Veranstaltungs-.hold Element manuell wie folgt:

$(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>

Es ist erwähnenswert, dass die Callback-Funktion, die auf dem document gesetzt wird in der Bubble-Phase ausgelöst.

Quelle

2016-05-05 23:41:51

versuchen, den folgenden

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

jsfiddle Link https://jsfiddle.net/w47anse9/

Quelle

2016-05-05 22:26:53 reza

Ihr Code funktioniert, wie es ist. Versuchen Sie, die Box zu ziehen oder zu erweitern? Ich habe nur Stile hinzugefügt.

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

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

Hier Geige mit Ihrem Code: jsfiddle

Quelle

2016-05-05 22:31:03 MaxKroshka

jQuery Mouseup Ereignis beim Klicken und ziehen

Antwort

Verwandte Themen