检测文本中哪个单词被右键单击 [英] Detect which word has been right-clicked on within a text
问题描述
对于我的应用程序,我想在有人右键单击时显示自定义上下文菜单.如果右键单击任何单词,我想为它显示一些额外的选项.我在网上查了一下,我找到了有关如何在左键单击时获取单词的解决方案,我尝试修改它以进行右键单击,但不知何故无法正常工作.
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();
}
});
我正在 Edge 浏览器上进行测试,因为我想在 UWP 应用中使用代码.
I am testing on Edge browser as I want to use the code in UWP app.
推荐答案
经过一些搜索和测试,这似乎适用于 EDGE.
After some search and test, this it seems to work on EDGE.
这是主要的变化:
$(".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();
}
});
更新
本次更新是针对滚动页面问题和首尾选词错误的解答.
This update is for answer at the scroll page problem and the first and last word selection error.
$('.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();
}
});
这篇关于检测文本中哪个单词被右键单击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!