延迟Javascript中的默认事件

Question

我希望能够延迟事件的默认操作，直到采取了其他操作。

它的用途：我正在尝试构建一种可重用、不显眼的方式来通过模态对话确认操作。关键的愿望清单项目是任何 Javascript 处理程序都由脚本附加，而不是直接内联编写。

为了使其真正可重用，我想在不同类型的项目上使用它：html 链接、复选框，甚至其他 Javascript 驱动的操作。对于像链接或复选框这样的纯 HTML 元素，我希望它们能够优雅地降级，这样它们就可以在不打开 Javascript 的情况下使用。

这是我对实现的设想：

<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 函数，但这会终止默认操作，而我无法恢复它。显然，default 对象与suspend、resume 和prevent 方法是为了说明我想要的结果。

顺便说一句，如果有帮助的话，我正在使用Ext.Core 库构建它。该库为处理事件提供了大量的规范化。但我真的很想在 Javascript 中学习它的一般原理。

Answer 1

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

<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>

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