jQuery UI 找不到“contextmenu”右键单击事件

发布于 2024-12-22 00:19:10 字数 1855 浏览 2 评论 0原文

所以我使用以下上下文菜单:

(function($) {
$.fn.setUpContextMenu = function() {
    $(this).dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        width: 'auto',
        height: 'auto',
        minHeight: 'auto',
        minWidth: 'auto'
    });

    return $(this);
};

$.fn.openContextMenu = function(jsEvent) {
    var menu = $(this);
    menu.css('padding', 0);

    menu.dialog('option', 'position', [jsEvent.clientX, jsEvent.clientY]);
    menu.unbind('dialogopen');
    menu.bind('dialogopen', function(event, ui) {
        $('.ui-dialog-titlebar').hide();
        $('.ui-widget-overlay').unbind('click');
        $('.ui-widget-overlay').css('opacity', 0);
        $('.ui-widget-overlay').click(function() {
            menu.dialog('close');
        });
    });
    menu.dialog('open');

    return menu;
};

})(jQuery);

我这样使用它:

$('#context-menu a').css('display', 'block').button();
        $('#context-menu').setUpContextMenu();
        $(document).bind('contextmenu', function(e) {
            $('#context-menu').openContextMenu(e);
            return false;
        });

上下文菜单如下所示:

<!--RIGHT-CLICK MENU MARKUP!--> 
<div id="context-menu">
    <a href="javascript:void(0)" id="option1">Option 1</a>
    <a href="javascript: alert($(this).attr('href'));">Option 2</a>
    <a href="javascript:void(0)" id="option3">Option 3</a>
    <a href="javascript:void(0)" id="option4">Option 4</a>
</div>

这是我的问题。我试图弄清楚如何捕获右键单击事件,这样我就可以确定事件是从哪个元素触发的。我知道,如果有必要,我可以向 $('#context-menu') 添加一个新的数据值来保存事件,但这看起来非常迂回,一点也不优雅。必须有更好的方法来获取原始事件。

感谢您的帮助,我很感激:)

*编辑:*为了澄清,我想弄清楚如何从实际上下文菜单标记内的标签内部引用右键单击事件。我在单击它们时执行一些 javascript,如何引用该事件以确定哪个元素触发了它?

so I'm using the following context menu:

(function($) {
$.fn.setUpContextMenu = function() {
    $(this).dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        width: 'auto',
        height: 'auto',
        minHeight: 'auto',
        minWidth: 'auto'
    });

    return $(this);
};

$.fn.openContextMenu = function(jsEvent) {
    var menu = $(this);
    menu.css('padding', 0);

    menu.dialog('option', 'position', [jsEvent.clientX, jsEvent.clientY]);
    menu.unbind('dialogopen');
    menu.bind('dialogopen', function(event, ui) {
        $('.ui-dialog-titlebar').hide();
        $('.ui-widget-overlay').unbind('click');
        $('.ui-widget-overlay').css('opacity', 0);
        $('.ui-widget-overlay').click(function() {
            menu.dialog('close');
        });
    });
    menu.dialog('open');

    return menu;
};

})(jQuery);

I use it like so:

$('#context-menu a').css('display', 'block').button();
        $('#context-menu').setUpContextMenu();
        $(document).bind('contextmenu', function(e) {
            $('#context-menu').openContextMenu(e);
            return false;
        });

The context menu looks like this:

<!--RIGHT-CLICK MENU MARKUP!--> 
<div id="context-menu">
    <a href="javascript:void(0)" id="option1">Option 1</a>
    <a href="javascript: alert($(this).attr('href'));">Option 2</a>
    <a href="javascript:void(0)" id="option3">Option 3</a>
    <a href="javascript:void(0)" id="option4">Option 4</a>
</div>

Here's my problem. I'm trying to figure out how to capture the right click event, that way I can determine from what element the event was fired. I know that if I have to I can just add a new data value to $('#context-menu') that holds the event, but that seems very roundabout and not very elegant at all. There has to be a better way to get the original event.

Thanks for any help, I appreciate it :)

*EDIT: * To clarify, I want to figure out how to refer to the right click event from inside the tags inside the actual context menu markup. I execute some javascript when they are clicked, how do I refer to the event in order to figure out which element fired it?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

苍景流年 2024-12-29 00:19:10

如果我现在明白你想要什么,看到你的网站可以帮助我理解(我认为?)我没有在这里创建代码,但我会给你它背后的逻辑。

OnRightClick(表单元素的)- 将 $(this)(表单元素)存储为 JavaScript 中的变量,该函数会在页面加载时加载。

SelectMenuItem - 当您选择菜单项时,您可以引用包含触发元素的变量。完成元素后,清除变量。

您可能还想在没有选择的情况下关闭上下文菜单时清除它。

更好的是,jQuery UI 有数据存储,请查看这篇文章以获取一些有用的代码:)

jQuery 上下文菜单 - 查找触发它的元素

If I understand what you want now, which seeing your site helped me understand (I think?) I haven't created the code here but I will give you the logic behind it.

OnRightClick(of the form element) - Store $(this)(the form element) as a variable in your javascript, the function that loads when your page does.

SelectMenuItem - When you select your menu item you can then reference the variable that contains your triggered element. Once you are finished with the element clear the variable.

You may also want to clear it when the context menu is closed without a selection.

Better Yet, jQuery UI has datastorage check this post out for some helpful code :)

jQuery context menu - finding what element triggered it off

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文