Ausgewählter Textereignisauslöser in Javascript

Wie kann eine JavaScript-Funktion ausgelöst werden, wenn jemand mit der Maus ein bestimmtes Textfragment auf einer Seite auswählt ?
Gibt es auch eine Möglichkeit, die Position des ausgewählten Textes auf der Seite zu ermitteln?

Update: Um es klarer zu machen, kann ein Textfragment Teil eines Satzes oder eines Wortes oder einer Phrase oder eines ganzen Absatzes sein.

Es gibt kein Ereignis " Text wurde ausgewählt " (DOM), aber Sie können ein mouseupEreignis an das binden document.body. Innerhalb dieses Ereignishandlers können Sie einfach die überprüfen

document.selection.createRange().text

oder

window.getSelection()

Methoden. Es gibt verschiedene Themen zu Stackoverflow, wie dieses eine Javascript, um einen Absatz des ausgewählten Textes auf der Webseite abzurufen .

Ich bin mir nicht sicher, was Sie mit "Finden der Position" meinen, aber um in meiner Beispielwelt zu bleiben, können Sie die event propertysfür X + Y-Mauspositionen verwenden.

Beispiel: http://www.jsfiddle.net/2C6fB/1/

Hier ist ein kurzes Mashup:

$('div').mouseup(function() {
    var text=getSelectedText();
    if (text!='') alert(text);
});

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}​

<div>Here is some text</div>

Demo: http://jsfiddle.net/FvnPS/11/

Es gibt eine neue experimentelle API, die sich damit befasst:

Das Auswahländerungsereignis der Auswahl-API wird ausgelöst, wenn das Auswahlobjekt des Dokuments geändert wird oder wenn sich die mit einer <input>oder einer <textarea>Änderung verknüpfte Auswahl ändert. Das Auswahländerungsereignis wird im ersten Fall auf das Dokument und im zweiten Fall auf das Element ausgelöst.

https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange

Beachten Sie, dass dies auf dem neuesten Stand ist und nicht garantiert wird, dass es auch in großen Browsern funktioniert.

AFAIK, es gibt kein solches Ereignis, das Sie beschrieben haben. Sie können diese Funktion jedoch emulieren.

Schauen Sie hier nach dem Code und der Demo.

Es gibt das Ereignis "Text wurde ausgewählt". Aber nur für Textbereiche, wie ich sie kenne.

<textarea onselect="message()" name="summary" cols="60" rows="5">
请写入个人简介，不少于200字！
</textarea>

var selectedText = "";

if (window.getSelection) {
    selectedText = window.getSelection();
}

if (document.getSelection) {
    selectedText = document.getSelection();
}

if (document.selection) {
    selectedText = document.selection.createRange().text;
}

function textSelector() {
   alert(selectedText);
}
textSelector();

Ich bin mir bei der Maus nicht sicher, aber diese Zeile funktioniert für Mobilgeräte. Sie wird jedes Mal aufgerufen, wenn eine Änderung an der Textauswahl vorgenommen wird.

document.addEventListener('selectionchange', () => {

});

Wenn Sie die Maustaste drücken, wird das mousedownEreignis ausgelöst. Wenn Sie die Maustaste loslassen, werden die Ereignisse mouseupund dann clickausgelöst.

Wir hören uns das mouseupEreignis an und prüfen, ob Text ausgewählt wurde, und führen die entsprechenden Vorgänge aus.

const p = document.getElementById('interactiveText');

p.addEventListener('mouseup', (e) => {
  const selection = window.getSelection().toString();

  if (selection === '') {
    console.log('click');
  } else {
    console.log('selection', selection);
  }
});