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

发布于 2024-08-16 19:45:47 字数 480 浏览 5 评论 0原文

我正在尝试编写一个函数来读取 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>

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

谢谢。

原文

I'm trying to write a function that reads the oncontextmenu event for a div item. (I need it to find out whether the ctrl key was being pressed, e.g. by using e.ctrlKey.)

This works:

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

But this does not:

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

What do I need to do to fix the second one?

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

云胡 2024-08-23 19:45:47

<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 代替。如果您不需要为同一对象上的同一事件使用多个处理程序，那么使用老式的 oneevent 样式处理程序会更容易（并且与古代浏览器更兼容）。

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

<div oncontextmenu="asdf(event)">

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

Why this works: inside the anonymous function created by an event handler attribute string, there is a local variable event initialised to point to the Event instance. IE has a broken event model, but this code still works because the event now refers not to a local variable but the window.event global.

However you would generally want to avoid event handler attributes these days. Better to assign event handlers from script itself, eg.:

<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>

Putting it in script also means your HTML stays validatable. (oncontextmenu is an IE extension that won't be standardised until HTML5.)

You can also migrate the same function to addEventListener, but note that IE doesn't support it so you need to sniff for the presence of addEventListener and if missing use the IE-specific attachEvent instead. If you don't need multiple handlers for the same event on the same object it is easier (and more compatible with ancient browser) to just use the old-school onevent-style handlers instead.

Note that contextmenu is an unreliable event. It isn't supported in all browsers, may be disabled or may always still bring up the browser's real context menu, and on a Mac a common way to get it is with Control-click, which may confuse your check for ctrlKey. Plus of course there are accessibility issues. Use context menus in web applications as a shortcut feature only, not as an essential access method.

回复收藏 0 原文

感情旳空白 2024-08-23 19:45:47

oncontextmenu="asdf()"

您不能直接使用属性值分配预定义函数。仅匿名函数（其中 function () { 和 } 替换为 attribute=" 和 "。这使得捕获事件对象相当困难（也许不可能，我觉得没有必要研究）。

如果您想直接分配函数，请使用 JavaScript 和 AttachEvent/addEventListener 来完成。

oncontextmenu="asdf()"

You can't assign predefined functions directly using attribute values. Only anonymous functions (where function () { and } are replaced with attribute=" and ". This makes it rather difficult to trap the event object (maybe impossible, it isn't something I've ever felt the need to investigate).

If you want to assign the function directly, do it using JavaScript with attachEvent/addEventListener.

回复收藏 0 原文