javascript:无法将 oncontextmenu 属性设置为预定义函数

Question

我正在尝试编写一个函数来读取 div 项目的 oncontextmenu 事件。 (我需要它来确定是否按下了 ctrl 键，例如通过使用 e.ctrlKey。)

这个有效:

<div id="item_2" class="lineitem" align=center oncontextmenu="alert('foo');">test</div>

但这不是:

<script language="JavaScript">
function asdf(e){
    alert('foo');
}
</script>
<div id="item_2" class="lineitem" align=center oncontextmenu=asdf>test</div>

我需要做什么来修复第二个问题？

谢谢。

Answer 1

<div oncontextmenu="asdf(event)">

<script type="text/javascript">
    function asdf(event){
        if (event.ctrlKey)
            alert('foo');
    }
</script>

为什么会这样:在由事件处理程序属性字符串创建的匿名函数内部，有一个局部变量 event 初始化为指向 Event 实例。 IE 有一个损坏的事件模型，但这段代码仍然有效，因为 event 现在不是局部变量而是 window.event 全局变量。

但是，现在您通常希望避免使用事件处理程序属性。最好从脚本本身分配​​事件处理程序，例如:

<div id="thing">

<script type="text/javascript">
    document.getElementById('thing').oncontextmenu= function(event) {
        if (event===undefined) event= window.event; // fix for IE
        if (event.ctrlKey)
            alert('foo');
    };
</script>

将它放在脚本中还意味着您的 HTML 保持可验证。 (oncontextmenu 是一个 IE 扩展，直到 HTML5 才被标准化。)

您也可以将相同的功能迁移到 addEventListener，但请注意 IE 不支持它，因此您需要嗅探是否存在 addEventListener，如果缺少则使用IE 特定的 attachEvent 代替。如果您不需要为同一对象上的同一事件使用多个处理程序，那么只使用老式的 onevent 样式的处理程序会更容易(并且与旧式浏览器更兼容)。

请注意，contextmenu 是一个不可靠的事件。并非所有浏览器都支持它，可能会被禁用或可能始终会调出浏览器的真实上下文菜单，在 Mac 上获取它的常用方法是使用 Control-click，这可能会混淆您对 ctrlKey 的检查。当然还有可访问性问题。将 Web 应用程序中的上下文菜单仅用作快捷功能，而不是基本的访问方法。