檢測在文本中右鍵單擊了哪個詞

Question

對於我的應用程序，我想在有人單擊右鍵時顯示​​一個自定義上下文菜單。 如果右鍵單擊任何單詞，我想顯示一些其他選項。 我在網上查了一下，找到了解決方案，以解決在單擊鼠標左鍵時如何獲得該單詞的問題，我嘗試對其進行修改以進行右鍵單擊，但是某種程度上它無法正常工作。

下面的代碼在單擊鼠標左鍵時會顯示帶有該單詞的警報，而在單擊鼠標右鍵時，它會執行相同的操作。 但是有時它不會顯示任何彈出窗口，而當它在彈出窗口中顯示單詞時，會顯示前一個右鍵單擊的單詞。

$('.text123').click(function(e){
   s = window.getSelection();
   var range = s.getRangeAt(0);
   var node = s.anchorNode;
   while(range.toString().indexOf(' ') != 0) {                 
     range.setStart(node,(range.startOffset -1));
   }
   range.setStart(node, range.startOffset +1);
   do{
     range.setEnd(node,range.endOffset + 1);
   }while(range.toString().indexOf(' ') == -1 && range.toString().trim() != '');
   var str = range.toString().trim();
   alert(str);
});

$(".text123").mouseup(function(){
   var e = window.event;
   if (e.button == 2)
   {
     jQuery(document.elementFromPoint(e.pageX, e.pageY)).click();
   }
});

我要在Edge瀏覽器上進行測試，因為我想在UWP應用中使用代碼。

Answer 1

經過一些搜索和測試后，這似乎可以在EDGE上運行。

JSFiddle演示。

這是主要更改：

$(".text123").on('contextmenu', function(evt){
   evt.preventDefault(); // with this the context menu will not open
   var e = window.event;
   if (e.button == 2) {
     /* START - And this make the selection before emulate the left click */
     var range = document.caretRangeFromPoint(e.pageX, e.pageY);
     var selection = window.getSelection();
     selection.removeAllRanges();
     selection.addRange(range);
     /* END */
     jQuery(document.elementFromPoint(e.pageX, e.pageY)).click();
   }
});

更新

此更新旨在解決滾動頁面問題以及第一個和最后一個單詞選擇錯誤。

新的JSFiddle。

$('.text123').click(function(e) {
    s = window.getSelection();
    var range = s.getRangeAt(0);
    var node = s.anchorNode;

    // ###  && range.startOffset != 0 <--- This check very first char
    while (range.toString().indexOf(' ') != 0 && range.startOffset != 0) {
        range.setStart(node, (range.startOffset - 1));
    }
    range.setStart(node, range.startOffset + 1);


    do {
        range.setEnd(node, range.endOffset + 1);
    } while (range.toString().indexOf(' ') == -1 && range.toString().trim() != '' && range.endOffset < range.endContainer.length);
    // ### && range.endOffset < range.endContainer.length <--- This check the last char

    var str = range.toString().trim();

    alert(str);
});


$(".text123").on('contextmenu', function(evt) {
    evt.preventDefault();
    var e = window.event;
    if (e.button == 2) {
        // ### - $(document).scrollTop() <--- This will fix the page scroll
        var range = document.caretRangeFromPoint(e.pageX, e.pageY - $(document).scrollTop()); 
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        // ### - $(document).scrollTop() <--- This will fix the page scroll
        jQuery(document.elementFromPoint(e.pageX, e.pageY - $(document).scrollTop())).click(); 
    }
});

Answer 2

在完全重新單擊之前，您需要花更多時間在此重新考慮上。

為什么？：輔助功能和用戶體驗：

• 右鍵單擊在移動設備上的訪問程度不同
• 大多數Mac用戶只有一個按鈕鼠標，因此很少使用右鍵單擊。

如果您仍然熱衷於右鍵單擊，請參閱以下線程，其中包含有關右鍵單擊事件的一些有用討論：

右鍵單擊Javascript事件嗎？