Question

jQuery中的Event对象有一个有用的preventDefault()方法，可以防止默认行为。

这通常用于防止点击事件执行浏览器默认行为。

它似乎对自定义事件也很有用。

我想用这种行为实现的任务是一个单独的问题，但我会将其解释为我正在寻找的行为的一个例子：

我有一个简单的插件，可以创建一个div的弹出窗口。我在互联网上找到了它。

$(selector).pop();

当您点击弹出窗口中的任何内容以外的任何内容时，我已将其攻击关闭，并防止单击元素上的默认点击行为。

function closeInactivePop() {
    var foundAny = false;
    jQ.each(function (i) {
        var $this = $(this);

        if ($this.hasClass('active') && ! $this.data('activePop')) {
            $this.removeClass('active');
            foundAny = true;
        }
    });
    return foundAny;
}

$('body').click(function(){ 
    // If we closed any, cancel the propagation. Otherwise let it be.
    if (closeInactivePop()) {
        $(document).trigger('jQuery.pop.menuClosed');
        return false;
    }
});

（现在我粘贴它，我意识到我可以做得更好一些，但尽管如此）。

现在我添加了一个在弹出窗口中绘制颜色选择器的新插件。除了这个颜色选择器创建的DOM不在弹出窗口内;它只是在视觉上。 DOM结构是独立的。

在前面提到的hack中，我更愿意发送另一个事件，其默认行为是关闭弹出窗口。

function closeInactivePop() {
    var foundAny = false;
    jQ.each(function (i) {
        var $this = $(this);

        if ($this.hasClass('active') && ! $this.data('activePop')) {
            $(document).trigger('jQuery.pop.menuClosed');
            $this.removeClass('active');
            foundAny = true;
        }
    });
    return foundAny;
}

$('*').click(function(e) {
    var $this = $(this);

    // This bit is pseudocode, where the Function is the default behaviour 
    // for this event.
    // It is helpful that $this is actually the clicked element and not the body.
    $this.trigger('jQuery.pop.menuBeforeClose', function() {
        // if we run default behaviour, try to close the popup, or re-trigger the click.
        if (!closeInactivePop()) {
            $this.trigger(e);
        }
    });
});

然后我可以稍后再做

$('#colour-picker').bind('jQuery.pop.menuBeforeClose', function(e) {
    e.preventDefault();
});

当原始点击事件的目标是颜色选择器或其中的某些内容时，这将阻止closeInactivePopup默认行为运行。

我能以某种方式做到这一点，甚至是黑客吗？

Answer 1

我怀疑有一种本地方式可以做到这一点。但是，您可以使用“triggerHandler（）”而不是“trigger（）”，它提供从事件处理程序返回值的功能。另一个相对简单的解决方案是传递一个自定义的“事件”对象，该对象可用于取消计划的操作：

function Action() {
    var status = true;
    this.cancel = function() { status = false; };
    this.status = function() { return status; };
}

$('button').click(function() {
    var action = new Action();
    $(this).trigger('foo', [action]);
    if (action.status()) {
        // ... perform default action
    }
});

在事件处理程序中：

$('*').bind('foo', function(event, action) {
    action.cancel();
});

在jQuery中，如何使用默认创建自定义事件？

1 个答案: