如何挂钩到浏览器的contextmenu事件

Question

我一直困惑，找不到一个适用于我的contextmenu。也许有人可以帮忙？

下面是我需要的ContextMenu被添加到什么：

<ul id="list_{id}" class="list"> 
    <li id="Item_{id}"><a ondblclick=""><span>{title}</span></a></li> 
</ul> 

这是动态的列表，所以它会增加更多的他们的网页上，并赋予不同的ID的不同它们。所以我需要一个contextMenu，它将被添加到每个列表，但每个列表都有一个独特的contextMenu。通过为contextMenu的ID添加动态{id}标签或类似的东西，在每个列表中基本上有不同的contextMenu实例。

感谢

Answer 1

这是一种很难告诉你在问什么，但如果你要挂钩到浏览器的“上下文菜单”事件，您挂钩contextmenu事件，然后做任何你（可能包括创建一个div，例如，其上有选项  —，例如，您自己的上下文菜单）。您可以单独通过getElementById在列表中自己单独执行该操作，也可以通过在包含所有列表的容器上挂接事件，然后确定何时触发事件列出它是由（“事件代表团”）触发的。

查看活动委托方法的答案的结尾。但是，假设你知道实际使用的ID的方式，你要明确挂钩每个列表因为某些原因：

HTML：

<ul id='list_1'> 
    <li>List 1 item 1</li> 
    <li>List 1 item 2</li> 
</ul> 
<ul id='list_2'> 
    <li>List 2 item 1</li> 
    <li>List 2 item 2</li> 
</ul> 

的JavaScript：

hookEvent(document.getElementById('list_1'), 'contextmenu', function(event) { 
    event = event || window.event; 
    if (event.preventDefault) { 
    event.preventDefault(); 
    } 
    display("List 1 context menu"); 
    return false; 
}); 
hookEvent(document.getElementById('list_2'), 'contextmenu', function(event) { 
    event = event || window.event; 
    if (event.preventDefault) { 
    event.preventDefault(); 
    } 
    display("List 2 context menu"); 
    return false; 
}); 

function hookEvent(element, event, handler) { 
    if (element.addEventListener) { 
    element.addEventListener(event, handler, false); 
    } 
    else if (element.attachEvent) { 
    element.attachEvent('on' + event, handler); 
    } 
    else { 
    element['on' + event] = handler; 
    } 
} 

Live example

请注意，只有一些（大多数）浏览器让您取消默认的上下文菜单。

---

更新：重新您的 “但如果该ID是什么绑定？”下面的问题：恐怕我不知道你的意思是“可绑定”  —你问题中的标签都没有表示特定的模板技术。你甚至没有提到模板是发生在服务器端还是客户端，这使得它很难提供帮助。但基本上，在JavaScript运行的时候，文档中的真实元素将会有真实ID。你必须知道这些ID是为了使用getElementById。

服务器端模板：

如果这些ID都将是完全动态的，模板在服务器上进行处理，可以包括传递给JavaScript这些ID脚本的小一点。例如，您可能在文档顶部附近有：

<script type='text/javascript'> 
var mySpecialListIDs = []; 
</script> 

...然后更新您的模板给每个它的扩展时间增加一个小script标签：

<ul id="list_{id}" class="list"> 
    <li id="Item_{id}"><a ondblclick=""><span>{title}</span></a></li> 
</ul> 
<script type='text/javascript'> 
mySpecialListIDs.push("{id}"); 
</script> 

那么你的客户端代码可以遍历mySpecialLitIDs和挂钩的处理程序时使用的每个ID。

客户端模板：

如果模板正在做的客户端，这变得有点简单：只需先设置好mySpecialListIDs名单在您的客户端脚本一些方便的地方，和在每次调用模板引擎时附加到它。

---

事件代表团：无论你在做服务器端或客户端模板，如果你将拥有动态列表这个样子，有时事件代表团是处理它的最佳方式。 contextmenu事件（像大多数，但不是全部事件）气泡起来的DOM。因此，如果您将它与一个祖先元素（包含所有列表的东西，如文档正文本身或某些类似东西）挂钩，则可以通过检查事件对象来查看哪个实际列表已被点击。就像这样：

HTML：

<div id='list_container'> 
    <ul id='list_1'> 
    <li>List 1 item 1</li> 
    <li>List 1 item 2</li> 
    </ul> 
    <ul id='list_2'> 
    <li>List 2 item 1</li> 
    <li>List 2 item 2</li> 
    </ul> 
</div> 

的JavaScript（使用hookEvent功能从上面）：

// Hook up the contextmenu event on the container, not 
// on each list: 
hookEvent(document.getElementById('list_container'), 
      'contextmenu', 
      handleListContextMenu); 

// Our handler function 
function handleListContextMenu(event) { 
    var target; 

    // Handle IE-vs-the-world difference 
    event = event || window.event; 

    // Find out what the actual target element clicked was 
    target = event.target || event.srcElement; 

    // See if it or an ancestor of it is one of our lists 
    while (target && 
     (target.tagName !== "UL" || !target.id || target.id.substring(0, 5) !== "list_")) { 
    target = target.parentNode; 
    } 

    // Did we find a list? 
    if (target) { 
    // Yes, handle this. 
    if (event.preventDefault) { 
     event.preventDefault(); 
    } 
    display("List '" + target.id + "' context menu"); 
    return false; 
    } 
} 

Live example