检测文本中哪个单词被右键单击

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 demo.

这是主要变化：

$(".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();
   }
});

更新

本次更新是针对滚动页面问题和首尾词选择错误的解答。

The new 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 用户很少使用右键单击。

如果您仍然热衷于右键单击，请参阅此线程，其中包含有关右键单击事件的一些有用讨论：

Is right click a Javascript event?