当用户单击一个元素时：阻止默认操作，显示菜单，然后在单击菜单时恢复默认操作答案

【问题标题】：When the user clicks an element: Prevent default action, present menu(s), then resume default action when menu is clicked当用户单击一个元素时：阻止默认操作，显示菜单，然后在单击菜单时恢复默认操作
【发布时间】：2011-04-27 05:53:23
【问题描述】：

目标

当用户点击一个元素（带有 class="menu"）时，不应执行默认操作。应该向用户呈现带有选项的菜单。单击选项后，应执行默认操作。

问题

首先停止原始点击事件是非常有问题的，因为在那之后似乎不可能恢复“默认行为” - 有没有办法将事件延迟到用户点击菜单项？

示例

我想要发生的事情：点击一个链接。菜单附加到正文。单击一个菜单选项。现在执行原始点击的默认行为（这意味着触发原始点击链接的点击事件并重定向到 example.com）。

jsFiddle

HTML、JS 和 CSS 在这里： http://jsfiddle.net/arex1337/Tjwmx/

PS：如果你想知道我需要什么功能，这里有一些关于我想到的应用程序的仓促和糟糕的想法：www。 scribd.com /doc/39573220/MyJsApp

【问题讨论】：

标签： javascript jquery javascript-events

【解决方案1】：

这是不可能的；您需要在代码中模拟默认行为。

您可以将location.href 设置为链接的href。

【讨论】：

1.为什么这不可能？在让原始点击事件发生之前，当然可以做一些事情。 2.您的解决方案不会触发可能触发其他东西的本机点击事件。 3. 我宁愿不尝试模拟行为并为每种类型的元素触发所有适当的事件。链接 = 原生点击 + 关注 href。文本字段 = 原生点击 + 焦点。不断地。让原始事件通过会更好。
@arex: 1：事实并非如此。您不能在不冻结整个浏览器的情况下阻止单击处理程序。 2. 我意识到这一点。您可以使用 jQuery 引发事件。 3. 你需要写很多代码。

【解决方案2】：

这很容易实现，看看这个： Quick modification of code from question

// create container for url of clicked link 
var event_href = {};

function createMenu(options) {
    $ul = $('<ul></ul>');
    $ul.append('<li class="menu-header">'+options.header+'</li>');
    for (var $i = 0; $i < options.choices.length; $i++) {
        $ul.append('<li class="menu-item">'+options.choices[$i]+'</li>');
    }
    return $ul;
}

function resumeClick(){
    window.location.href = event_href;
}

$('.menu').click('click', function(e) {
    // save event data
    event_href = e.currentTarget.href;
    e.preventDefault()
        $('#placeholder ul').remove();
    createMenu({
        header: 'Choose something',
        choices: ['Item 1', 'Item 2', 'Item 3']
    }).appendTo('#placeholder');
    // init listeners on menu items with callbacks == resume function
    $('.menu-item').click('click', function(){
    resumeClick();})
});

【讨论】：