Почему мое положение пользовательского контекстного меню не относительно моей таблицы ⇐ CSS

[Anonymous]

У меня проблема с контекстным меню. Когда я нажимаю на любое место страницы, расположение контекстного меню правильное, а когда я нажимаю на любую ячейку таблицы, контекстное меню находится далеко от того места, где я щелкнул. Нажмите на него внутри полумесяца стола.

Код: Выделить всё

$(document).ready(function() {

const contextMenu = $(".wrapper_contextMenu");

$(document).on("contextmenu", function(e) {
e.preventDefault();

let x = e.offsetX,
y = e.offsetY,
winWidth = window.innerWidth,
winHeight = window.innerHeight,
cmWidth = contextMenu.width(),
cmHeight = contextMenu.height();

x = x > winWidth - cmWidth ? winWidth - cmWidth - 5 : x;
y = y > winHeight - cmHeight ? winHeight - cmHeight - 5 : y;

contextMenu.css({
left: `${x}px`,
top: `${y}px`,
visibility: "visible"
});
});

$(document).on("click", function() {
contextMenu.css("visibility", "hidden");
});

$("#data-table").on("click", function(e) {
if (!e.ctrlKey && $(e.target).prop("tagName") !== "TD") {
const selectedRows = $("#data-table .selected");
selectedRows.removeClass("selected");
}
});

$("#data-table").on("click", "td", function(e) {
if (e.ctrlKey) {
const tr = $(e.target).closest("tr");
tr.addClass("selected");
console.log(tr);
}
});

$(document).on("click", function(e) {
if (!e.ctrlKey &&  $(e.target).prop("tagName") !== "TD") {
const selectedRows = $("#data-table .selected");
selectedRows.removeClass("selected");
}
});
});

Код: Выделить всё

/* Import Google Font - Poppins */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 100vh;
background: linear-gradient(135deg, #8B55E9 0%, #5D6BE6 100%)
}

.selected {
background-color: aqua;
}

.wrapper_contextMenu {
visibility: hidden;
position: absolute;
width: 230px;
border-radius: 10px;
background: #fff;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

.wrapper_contextMenu .menu {
padding: 10px 12px;
}

.content_context .item {
list-style: none;
font-size: 22px;
height: 35px;
display: flex;
width: 100%;
cursor: pointer;
align-items: center;
border-radius: 5px;
margin-bottom: 2px;
padding: 0 5px 0 10px;
}

.content_context .item:hover {
background: #f2f2f2;
}

.content_context .item span {
margin-left: 8px;
font-size: 15px;
}

.content_context .setting {
display: flex;
margin-top: -5px;
padding: 5px 12px;
border-top: 1px solid #ccc;
}

.content_context .share {
position: relative;
justify-content: space-between;
}

.share .share-menu {
position: absolute;
background: #fff;
width: 200px;
right: -200px;
top: -35px;
padding: 13px;
opacity: 0;
pointer-events: none;
border-radius: 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
transition: 0.2s ease;
}

.share:hover .share-menu {
opacity: 1;
pointer-events: auto;
}

Код: Выделить всё

ALARM_DESC



ALARM_NAME



APPLICAITON





sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj
utilization w 235421235334
SiteScope


sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj
utilization w sdfdsf
SiteScope


sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj
utilization w 235424
SiteScope



sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj
utilization w sdfdsf
SiteScope


sdklfsdlkfjdslk jsdlfk jlsfjsdlkfj
utilization w 235424
SiteScope








[list]
[*]
[i]
Preview

[*]
[img]cursor (1).png[/img]
Preview

[*]
[img]cursor (1).png[/img]
Preview

[*]


[i]
Share




[i][/i]
Twitter

[*]
[i][/i]
Instagram

[*]
[i][/i]
Dribble

[*]
[i][/i]
Telegram

[/list]

[*]
[img]cursor (1).png[/img]
Get Link

[*]
[img]cursor (1).png[/img]
Rename

[*]
[img]cursor (1).png[/img]
Delete



[*]
[img]cursor (1).png[/img]
Settings

Я пытался отредактировать этот код

Код: Выделить всё

const contextMenu = $(".wrapper_contextMenu");

$(document).on("contextmenu", function(e) {
e.preventDefault();

let x = e.offsetX,
y = e.offsetY,
winWidth = window.innerWidth,
winHeight = window.innerHeight,
cmWidth = contextMenu.width(),
cmHeight = contextMenu.height();

x = x > winWidth - cmWidth ? winWidth - cmWidth - 5 : x;
y = y > winHeight - cmHeight ? winHeight - cmHeight - 5 : y;

contextMenu.css({
left: `${x}px`,
top: `${y}px`,
visibility: "visible"
});
});

но результат тот же

Подробнее здесь: https://stackoverflow.com/questions/785 ... o-my-table