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应用程序中的上下文菜单用作快捷功能,而不是必需的访问方法.