Blazor - Когда JavaScript работает для пользовательского контекстного меню, приложение перемещается на домашнюю страницу ⇐ Javascript

[Anonymous]

фон < /h4>
У меня есть приложение на стороне сервера Blazor, которое я строю, которое будет на веб-сайте музыкальных листов. У меня проблемы с запуском кода JavaScript для контекстного меню. Я начал добавлять пользовательское контекстное меню, поэтому пользователи смогут щелкнуть правой кнопкой мыши на странице, и я предоставляю им список пользовательских действий, которые они могут предпринять. После того, как он внедрил кучу журнала консоли и использования таймера сна, кажется, что это просто происходит, когда JavaScript заканчивается, а не какое -либо конкретное действие. Ниже приведен код для newsheet.razor . Я пока включаю только соответствующий код, но я могу добавить более подробную информацию по запросу.

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

@*HTML for context menu*@

[list]
[*]
[url=#] Add Verse[/url]

[*]
[url=#] Add Chorus[/url]

[*]
[url=#] Add Bridge[/url]

[*]
[url=#] Add Line (notes and lyrics)[/url]

[/list]

< /code>

var MenuOpen = false;
var ContextMenuActive = "context-menu--active";
var MenuElement = document.querySelector("#context-menu");

function clickInsideElement(e, className) {
var el = e.srcElement || e.target;

if (el.classList.contains(className)) {
return el;
} else {
while (el = el.parentNode) {
if (el.classList && el.classList.contains(className)) {
return el;
}
}
}

return false;
}

function getPosition(e) {
var posx = 0;
var posy = 0;

if (!e) var e = window.event;

if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
} else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}

return {
x: posx,
y: posy
}
}

function init() {
contextListener();
clickListener();
keyupListener();
resizeListener();
}

function contextListener() {
document.addEventListener("contextmenu", function(e) {
//var taskItemInContext = clickInsideElement(e, "task"); // this should check if the click is on one of the context menu items, but instead causes the menu to never open.
//if (taskItemInContext) {
if (MenuOpen) {
toggleMenuOff();

} else {
e.preventDefault();
toggleMenuOn();
positionMenu(e);
}
});
}

function clickListener() {
document.addEventListener("click", function(e) {
var clickeElIsLink = clickInsideElement(e, "context-menu__link");

if (clickeElIsLink) {
e.preventDefault();
menuItemListener(clickeElIsLink); // logs the data attribute to the console.  This essentially tells you which menu option was selected.
} else {
var button = e.which || e.button;
if (button === 1) {
toggleMenuOff();
}
}
});
}

// If user presses esc button then close the menu
function keyupListener() {
window.onkeyup = function(e) {
if (e.keyCode === 27) {
toggleMenuOff();
}
}
}

// If the user is resizing the browser window then close the context menu for now.
function resizeListener() {
window.onresize = function(e) {
toggleMenuOff();
};
}

// Safe method for toggling on the context MenuElement. Does check first to make sure menu is closed before attempting to open.
function toggleMenuOn() {
if (!MenuOpen) {
MenuElement.classList.add(ContextMenuActive);
MenuOpen = true;
}
}

// Safe method for toggling off the context MenuElement. Does check first to make sure menu is open before attempting to close.
function toggleMenuOff() {
if (MenuOpen) {
MenuElement.classList.remove(ContextMenuActive); // this doesn't seem to be causing an issue. Page still redirects, even when this is commented out.
MenuOpen = false;
}
}

function positionMenu(e) {
var clickCoords = getPosition(e);
var clickCoordsX = clickCoords.x;
var clickCoordsY = clickCoords.y;

var menuWidth = MenuElement.offsetWidth + 4;
var menuHeight = MenuElement.offsetHeight + 4;

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

if ((windowWidth - clickCoordsX) < menuWidth) {
MenuElement.style.left = windowWidth - menuWidth + "px";
} else {
MenuElement.style.left = clickCoordsX + "px";
}

if ((windowHeight - clickCoordsY) < menuHeight) {
MenuElement.style.top = windowHeight - menuHeight + "px";
} else {
MenuElement.style.top = clickCoordsY + "px";
}
}

// Function called to take an action from clicking on one of the menu items. After action is taken, closes the menu.
function menuItemListener(link) {
console.log(link.getAttribute("data-action")); // this is where the data action attribute is logged to the console.
}

Основной вопрос:
Почему приложение продолжает перемещаться обратно на домашнюю страницу, когда сценарий работает?


Подробнее здесь: https://stackoverflow.com/questions/797 ... ack-to-hom