我正在尝试将自定义上下文菜单添加到页面中的某些元素，并在包含表格的视图中这样做。上下文菜单附加到名称为“S”的表头：
list.view = function(ctrl, args) {
var contextMenuSelection =
m("div", {
id : "context-menu-bkg-01",
class : ctrl.isContextMenuVisible() === ctrl.contextMenuId ? "context-menu" : "hide",
style : ctrl.contextMenuPosition(),
}, [ m("#select.menu-item.allow-hover", {
onclick : function(e) {
args.model.callMenu({
cmdName : this.id
})
}
}, "Select all"), m("#deselect.menu-item.allow-hover", {
onclick : function(e) {
args.model.callMenu({
cmdName : this.id
})
}
}, "Deselect all"), m("#invertSel.menu-item.allow-hover", {
onclick : function(e) {
args.model.callMenu({
cmdName : this.id
})
}
}, "Invert selection") ]);
var table = m("table", [
m("tr", [ m("th", {
id : ctrl.contextMenuId,
config : ctrl.configContextMenu(),
oncontextmenu : function(e) {
console.log("2021 contextMenuShow")
e.preventDefault()
var coords = utils.getCoords(e)
var pos = {}
pos.left = coords[0] + "px"
pos.top = coords[1] + "px"
ctrl.contextMenuPosition(pos)
var id = e.currentTarget.id
ctrl.isContextMenuVisible(id)
}
}, "S"),
m("th[data-sort-by=pName]", "Name"),
m("th[data-sort-by=pSize]", "Size"),
m("th[data-sort-by=pPath]", "Path"),
m("th[data-sort-by=pMedia]", "Media") ]),
ctrl.items().map(
function(item, idx) {
return m("tr", ctrl.initRow(item, idx), {
key : item.guid
}, [ m("input[type=checkbox]", {
id : item.guid,
checked : ctrl.isSelected(item.guid)
}),
m("td", item.pName),
m("td", utils.numberWithDots(item.pSize)),
m("td", item.pPath), m("td", item.pMedia) ])
}) ])
return m("div", [contextMenuSelection, table])
}
要在按下转义键或用户用鼠标单击页面中的某个位置后关闭上下文菜单，此函数通过 config 属性附加到元素：
ctrl.configContextMenu = function() {
return function(element, isInitialized, context) {
console.log("1220 isInitialized=" + isInitialized)
if(!isInitialized) {
console.log("1225")
document.addEventListener('click', function() {
m.startComputation()
ctrl.contextMenuVisibility(0)
m.endComputation()
}, false);
document.addEventListener('keydown', function() {
console.log("1235")
m.startComputation()
ctrl.contextMenuVisibility(0)
m.endComputation()
}, false)
}
};
};
行为是不可预知的：如果表为空，自定义上下文菜单会按预期显示并隐藏。如果表格已填充，则会显示默认的上下文菜单。
使用调试器和一些断点并没有让我了解正在发生的事情，除了有时逐步运行调试器会调出自定义上下文菜单。所以我认为这与 eventListener 和 Mithrils 绘制系统之间的竞争条件有关。
有没有人有自定义上下文菜单的经验，可以给我一些例子吗？
非常感谢，斯特凡
编辑： 关于 Barneys 关于 m.startComputation() 的评论，我将代码更改为以下内容：
var table = m("table", ctrl.sorts(ctrl.items()), [
m("tr", [ m("th", {
oncontextmenu : ctrl.onContextMenu(ctrl.contextMenuId, "context-menu context-menu-bkg", "hide" )
}, "S"), m("th[data-sort-by=pName]", "Name"),
m("th[data-sort-by=pSize]", "Size"),
m("th[data-sort-by=pPath]", "Path"),
m("th[data-sort-by=pMedia]", "Media") ]),
ctrl.items().map(function(item, idx) {
return m("tr", ctrl.initRow(item, idx), {
key : item.guid
}, [ m("input[type=checkbox]", {
id : item.guid,
checked : ctrl.isSelected(item.guid),
onclick : function(e) {
console.log("1000")
ctrl.setSelected(this.id);
}
}), m("td", item.pName), m("td", utils.numberWithDots(item.pSize)),
m("td", item.pPath), m("td", item.pMedia) ])
}) ])
以及onContextMenu的实现函数：
// open a context menu
// @elementId the id of the element which resembles the context menu.
// Usually this is a div.
// @classShow the name of the css class for showing the menu
// @classHide the name of the css class for hiding the menu
vmc.onContextMenu = function(elementId, classShow, classHide) {
var callback = function(e) {
console.log("3010" + this)
var contextmenudiv = document.getElementById(elementId);
contextmenudiv.className = classHide;
document.removeEventListener("click", callback, false);
document.removeEventListener("keydown", callback, false);
}
return function(e) {
console.log("3000" + this)
var contextmenudiv = document.getElementById(elementId);
// Prevent the browser from opening the default context menu
e.preventDefault();
var coords = utils.getCoords(e);
contextmenudiv.style.left = coords[0] + "px";
contextmenudiv.style.top = coords[1] + "px";
// Display it
contextmenudiv.className = classShow;
// When you click somewhere else, hide it
document.addEventListener("click", callback, false);
document.addEventListener("keydown", callback, false);
}
};
现在这工作没有问题。巴尼，如果你能确认这是一种可行的方法，我会把它作为答案发布。
谢谢，斯特凡