0

显然，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 结构是独立的。

在上述黑客攻击中，我实际上更愿意触发另一个事件，其默认行为是关闭弹出窗口。

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 默认行为运行。

我可以以某种方式做到这一点，甚至是骇人听闻的吗？

4

1 回答 1

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();
});
于 2012-12-17T16:23:59.663 回答