延迟Javascript中的默认事件 [英] Delaying default events in Javascript

问题描述

我希望能够延迟事件的默认操作，直到采取其他措施为止.

I would like to be able to delay the default action of an event until some other action has been taken.

它的用途:我正在尝试构建一种可重用的，不引人注目的方式，以通过模态对话确认动作.关键的愿望清单项是任何javascript处理程序均由脚本附加，而不是直接内联编写.

What it's for: I'm trying to build a reusable, unobtrusive way to confirm actions with a modal-type dialogue. The key wishlist item is that any javascript handlers are attached by a script, and not written directly inline.

要使其真正可重用，我想在不同类型的项目上使用它:html链接，复选框，甚至其他由javascript驱动的操作.对于纯HTML元素(例如链接或复选框)，我希望它们优雅地降级，以便在不打开JavaScript的情况下可用.

To make this truly reusable, I want to use it on different types of items: html links, checkboxes, and even other javascript-driven actions. And for purely HTML elements like links or checkboxes, I want them to degrade gracefully so they're usable without javascript turned on.

这是我设想实现的方式:

Here's how I would envision the implementation:

<a href="/somelink/" class="confirm">Some Link</a>
_________

<script>
    attachEvent('a.confirm','click', confirmAction.fire)

    var confirmAction = (function(){
        var public = {
            fire: function(e){
                e.default.suspend();
                this.modal();
            },
            modal: function(){
                showmodal();
                yesbutton.onclick = this.confirmed;
                nobutton.onclick = this.canceled;
            },
            confirmed: function(){
                hidemodal();
                e.default.resume();
            },
            canceled: function(){
                hidemodal();
                e.default.prevent();
            }
        }
        return public;
    })()

</script>

我知道e.preventDefault函数，但是这将终止默认操作，而又没有赋予我恢复它的能力.显然，用suspend，resume和prevent方法构成的default对象是为了说明我想要的目的.

I know about the e.preventDefault function, but that will kill the default action without giving me the ability to resume it. Obviously, the default object with the suspend, resume and prevent methods is made up to illustrate my desired end.

顺便说一句，我正在使用 Ext.Core 构建它库，如果有帮助的话.该库为处理事件提供了大量标准化.但是我真的很感兴趣用Java语言学习它的一般原理.

By the way, I'm building this using the Ext.Core library, if that helps. The library provides a good deal of normalization for handling events. But I'm really very interested in learning the general principles of this in Javascript.

谢谢！

推荐答案

要继续，您可以尝试保存事件并重新触发它，设置一个标志，该标志可用于跳过调用suspend()的处理程序(在您的示例中，为"confirmAction.fire".

To resume, you could try saving the event and re-fire it, setting a flag that can be used to skip the handlers that call suspend() ('confirmAction.fire', in your example).

<a href="/somelink/" class="confirm">Some Link</a>
_________

<script>
function bindMethod(self, method) {
    return function() {
        method.apply(self, arguments);
    }
}
var confirmAction = (function(){
    var public = {
            delayEvent: function(e) {
                if (e.suspend()) {
                    this.rememberEvent(e);
                    return true;
                } else {
                    return false;
                }
            },
            fire: function(e){
                if (this.delayEvent(e)) {
                    this.modal();
                }
            },
            modal: function(){
                    showmodal();
                    yesbutton.onclick = bindMethod(this, this.confirmed);
                    nobutton.onclick = bindMethod(this, this.canceled);
            },
            confirmed: function(){
                    hidemodal();
                    this.rememberEvent().resume();
            },
            canceled: function(){
                    hidemodal();
                    this.forgetEvent();
            },
            rememberEvent: function (e) {
                if (e) {
                    this.currEvent=e;
                } else {
                    return this.currEvent;
                }
            },
            forgetEvent: function () {
                delete this.currEvent;
            }
    }
    return public;
})()

// delayableEvent should be mixed in to the event class.
var delayableEvent = (function (){
     return {
        suspend: function() {
            if (this.suspended) {
                return false;
            } else {
                this.suspended = true;
                this.preventDefault();
                return true;
            }
        },
        resume: function () {
            /* rest of 'resume' is highly dependent on event implementation, 
               but might look like */
            this.target.fireEvent(this);
        }
     };
})();

/* 'this' in event handlers will generally be the element the listener is registered 
 * on, so you need to make sure 'this' has the confirmAction methods.
 */
mixin('a.confirm', confirmAction);
attachEvent('a.confirm','click', confirmAction.fire);
</script>

这仍然存在潜在的错误，例如它如何与其他事件侦听器交互.

This still has potential bugs, such as how it interacts with other event listeners.

这篇关于延迟Javascript中的默认事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！