Wie man Teil in Javascript jongliert?

Ich versuche, etwas wie einen Lautstärkeregler oder eine Video-Suchleiste zu replizieren, wo der Indikator an diesen Ort springt, wenn der Benutzer auf einen Punkt klickt.Wie man Teil in Javascript jongliert?

Um dies zu tun, versuche ich die Position eines Klickereignisses auf einem div zu erhalten. Wenn der Benutzer irgendwo auf mein div klickt, versuche ich x, y coords zurückzugeben.

Bisher habe ich nur eine div und ein basisches Zuhörer:

<div class="heybro" style="width:100px;height:100px;background:black;"></div> 

$('.heybro').click(function(){ 
    alert("something"); 
});

Quelle

2016-12-02 mr jorden

Mögliche Duplikat [Mit jQuery, wie man Klicken Sie auf Koordinaten auf dem Zielelement] (http://stackoverflow.com/questions/3234977/using-jquery-how-to-get-click-coordinates-on-the-target-element) –

Sie können hinzufügen Element an dieser Stelle und fügen Sie den Event-Listener oben – bksi

Sie können dies auch verweisen: http://StackOverflow.com/Questions/7034342/Jquery-onclick-on-Div – Mhandroid

Versuchen Sie das event Objekt in Ihrem Klick-Handler:

$('.heybro').click(function(e) { 
 
    console.log("click location in page:"); 
 
    console.log(e.pageX, e.pageY); 
 
    var offset = $(this).offset() 
 
    console.log("click location in div:"); 
 
    console.log(e.pageX - offset.left, e.pageY - offset.top); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="heybro" style="width:100px;height:100px;background:black;"></div>

Werfen Sie einen Blick auf diese Antwort für weitere Einzelheiten: https://stackoverflow.com/a/3236129/123415

Quelle

2016-12-02 17:34:39 jcuenod

Danke, es funktioniert , Aber mein 'e.pageY' Wert zeigt wie 472, wenn ich auf Position 20 klicke. –

O.k Ich denke, es zeigt die Position des "Körpers" anders als meine "div" Element-Position, Können Sie mir sagen, warum macht es das? FYI: Ich benutze genau den gleichen Code wie du oben gesagt hast. –

$(".heybro").onclick(function() { 
     var $clicker = $(this); 
     var pos = $clicker.position(); 
     console.log(pos.top); 
     console.log(pos.left); 
    });

Editted klar Erklärung, für jeden, der will vielleicht verstehen, wie es funktioniert.

Die Variable $ clicker wird initialisiert und ein neues spezielles jQuery-Objekt erstellt. Wir müssen dies tun, um mit der zweiten Methode jQuery.position eine neue Variable mit dem oberen und dem linken Offset des Klicks zu erstellen.

var pos = $clicker.position();

Wir können nun die „top“ zuzugreifen und „rechts“ Eigenschaften, die die Position angeben, wo der Benutzer geklickt hat, relativ zu den oberen und linken Koordinaten.

Quelle

2016-12-02 17:33:23

Wie man Teil in Javascript jongliert?

Antwort

Verwandte Themen