Question

我正在创建一个“在此选项卡中打开链接”上下文菜单项，当右键单击给定网页上的任何链接时，该菜单项应该出现。我当前代码的最后一个块将属性添加到每个链接：

for (let node of document.getElementsByTagName("a")) {
    node.setAttribute("contextmenu", menu.id);
}

我发现我只能将属性添加到实际右键单击的链接，如下所示：

for (let node of document.getElementsByTagName("a")) {
    node.oncontextmenu = function() {
        node.setAttribute("contextmenu", menu.id);
    };
}

以某种方式做到这一点有什么好处吗？

Answer 1

在两个示例中，您都要为每个<ul class="spancabine"> <div> <label class="checkbox-inline"> {% for indicateur in indicateures %} <li class="check-ser"> <label class="check"> <span><input name="indicateur[]" onchange="change_checkbox(this)" type="checkbox" class="indicateur{{ indicateur.id }}" value="{{ indicateur.id }}">{{ indicateur.titre }} </span> </label> </li> </label> </div> <div> <label class="checkbox-inline"> <div class="show{{ indicateur.id }}" style=" display: none; margin-left: 100px"> {% for annee in indicateur.annee %} <li class="check-ser"> <label class="check"> <span><input type="checkbox" name="annee[]" class="annee{{ annee.id }}" alt="{{ annee.id }}{{ indicateur.id }}" onchange="change_checkboxx(this)" value="{{ annee.id }}">{{ annee.annee }} </span> </label> </li> <li class="check-ser"> <label class="check"> <span> <div class="object{{ annee.id }}{{ indicateur.id }}" style="display: none !important;"> <input class="object{{ annee.id }}" type="text" name="objectif[]" value="" style=""> </div> </span> </label> </li> <br> {% endfor %} </div> <br> {% endfor %} {#<input type="checkbox" value="">Indicateur 1#} </label> </div> </ul>标记添加事件处理程序。

在第二个示例中，您只使用事件处理程序将其替换为真实处理程序。事实上，在这种情况下，我非常怀疑用户第一次右键单击该行为将与意图不同，因为它将自己替换为预期的处理程序而不是仅仅执行您希望它执行的操作。

简而言之，我认为你是在思考这个问题。第一个例子似乎更轻松，更清晰。

Answer 2

根据RobG上面的建议，在身体上设置属性要比我选择的任何一种方法更好 - 基本上，这个：

document.body.addEventListener("contextmenu", menuOn);

其次是：

function menuOn() {
    if (document.activeElement.href !== undefined) {
        document.body.setAttribute("contextmenu", menu.id);
    } else {
        document.body.removeAttribute("contextmenu");
    }
}

仅根据需要设置contextmenu属性更好吗？

2 个答案: