Detect which word has been right-clicked on within a text

Question

For my application, I want to show a custom context menu whenever someone right clicks. And if the right click was on any word, I want to show some extra option for it. I looked up on the net and I found solution on how to get the word when it is left clicked, I tried to modify it for the right-click but somehow couldn't it to work.

The code below, on doing a left click it shows an alert with the word and on doing a right click it's expected to do the same. But sometimes it doesn't show any pop-up and when it shows the word in the pop-up the previous right-clicked word.

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

I am testing on Edge browser as I want to use the code in UWP app.

Baro · Accepted Answer · 2017-04-26T18:21:31.420

After some search and test, this it seems to work on EDGE.

JSFiddle demo.

This is the main change:

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

UPDATE

This update is for answer at the scroll page problem and the first and last word selection error.

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

Brother, thanks a million. I spent my entire afternoon and here is the answer! Thanks once again. — ac-lap, Apr 23 '17 at 13:17
One problem though. It doesn't work when the window is scrolled. Replacing pageX/Y with clientX/Y solves the problem. — ac-lap, Apr 23 '17 at 13:47
@ac-lap Sorry for my late :) I've updated the answer with my personal version of the fix. And I solved another bug I found. — Baro, Apr 26 '17 at 18:23

score 0 · Answer 2 · edited May 23 '17 at 12:10

0

Before you invest more time in this reconsider using right-click at all.

Why?: Accessibility and user experience:

Right-click isn´t equally accessible on mobile devices
Right-click is rarely used by most Mac users, who have a one button mouse.

If you are still keen on the right-click, see this thread which contains some useful discussions about the right-click event:

Is right click a Javascript event?

edited May 23 '17 at 12:10

Community

1
1

answered Apr 23 '17 at 13:09

csaetre

129
5

thanks for replying. The app is only for Window 10 PC, so accessibility on mobile devices is not a concern and for obvious reasons Mac users are also out of question. In Windows context menus open only on right-click and users are accustomed to that. I can open context menu on left-click but that will look a little out of the place. – ac-lap Apr 23 '17 at 13:09

Detect which word has been right-clicked on within a text

2 Answers2

Linked