Wie erhalte ich in jQuery präzise Klickkoordinaten relativ zu einem Zielelement?

Suchen von Klickkoordinaten auf einem Zielelement mithilfe von jQuery

Um die genaue Position eines Mausklicks auf ein bestimmtes Zielelement zu ermitteln, müssen Sie Sie können erwägen, entweder die Eigenschaften pageX und pageY zu verwenden, um die Position relativ zum gesamten Dokument zu bestimmen, oder die Methode offset(), um die relative Position innerhalb des spezifischen Dokuments festzulegen Element.

Wenn Sie jedoch die relative Position innerhalb des übergeordneten Elements oder eines anderen enthaltenden Elements benötigen, können Sie die Methode position() verwenden. Hier ist ein Beispiel, das die Verwendung dieser Methoden demonstriert:

$('#element').on('click', function(e) {
  // Determining position relative to document using pageX and pageY:
  var clickX = e.pageX;
  var clickY = e.pageY;

  // Determining position relative to element using offset():
  var offsetX = $(this).offset().left;
  var offsetY = $(this).offset().top;
  var relativeClickX = e.pageX - offsetX;
  var relativeClickY = e.pageY - offsetY;

  // Determining position relative to parent using position():
  var positionX = $(this).position().left;
  var positionY = $(this).position().top;
  var parentRelativeClickX = e.pageX - positionX;
  var parentRelativeClickY = e.pageY - positionY;
});

Im Fall Ihres Codes:

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - e.target.offsetLeft;
    alert(x);    
});

Ihre Absicht ist es, die Position des Mauszeigers relativ zum # abzurufen Suchleistenelement beim Klicken. Die Subtraktion von e.target.offsetLeft ist jedoch falsch, da die Eigenschaft offsetLeft die Position des Elements relativ zu seinem übergeordneten Element zurückgibt. Stattdessen sollten Sie e.pageX direkt verwenden, das die x-Koordinate relativ zum Dokument bereitstellt.

Eine detailliertere Erläuterung finden Sie in der bereitgestellten Codedemonstration.

Das obige ist der detaillierte Inhalt vonWie erhalte ich in jQuery präzise Klickkoordinaten relativ zu einem Zielelement?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!