两个按钮提交中断页面上的其他事件（mootools）答案

【问题标题】：Two button submit breaks other events on page (mootools)两个按钮提交中断页面上的其他事件（mootools）
【发布时间】：2011-04-19 10:54:34
【问题描述】：

我想使用两个按钮表单并创建以下有效的表单。但是，它会破坏页面上的任何其他事件，但我不知道为什么。有没有更好的办法？

        window.addEvent('domready', function() {
        $('vote1').addEvent('click',function() {  
            new Element('input', { 
                    'type': 'hidden', 
                    'name': 'winner', 
                    'id': 'vote1id', 
                    'value': 'vote1' 
                }).inject($('voterform'));
            $('vote_wrapper').setStyle('display','none');
        });

        $('vote2').addEvent('click',function() { 
            new Element('input', { 
                    'type': 'hidden', 
                    'name': 'winner', 
                    'id': 'vote2id', 
                    'value': 'vote2' 
                }).inject($('voterform'));
            $('vote_wrapper').setStyle('display','none');   
        });

        $('voterform').addEvent('submit', function(e) {
            e.stop();
            var log = $('v_wrapper').empty().addClass('loader');
            this.set('send', {onComplete: function(response) { 
                log.removeClass('loader');
                $('v_wrapper').set('html', response).set("tween", {duration: 2500}).setOpacity(0).fade(1);
            }});
            this.send();
        });
    });

【问题讨论】：

这会破坏哪些其他事件？非常奇怪-我没有发现您的代码有任何问题。您可以做的一件事来拯救自己支持两组处理程序，保持 vote1 代码原样，在 vote2 上设置 click 处理程序来执行 1document.id("vote1").fireEvent("click");`。否则，请发布更多关于问题的信息
我想我应该说请求。任何类型的 html 请求都不会通过 ajax 返回，而是会中断到带有结果的新页面。
我明白了。因此，您可能有以下两种情况之一：未捕获的异常导致您的回调函数无法运行，因此会发生默认浏览器行为（我通过 jslint 运行上面的代码，所以无论它是什么，它都不是语法或不在此代码块中）。二：事件处理不当/冒泡再次无法停止默认动作。 您是说您可以删除两个单击事件处理程序，但它使您的表单可以通过 XHR 工作？您指的是 $('v_wrapper') 和 $('vote_wrapper') - 这是故意的吗？

标签： mootools mootools-events mootools1.2

【解决方案1】：

在上面的代码中，如果 $('vote1') 或 $('vote2') 是链接或表单按钮，您需要如下修改代码以防止发生默认操作：

    $('vote1').addEvent('click',function(e) {
        e.stop();  
        new Element('input', { 
                'type': 'hidden', 
                'name': 'winner', 
                'id': 'vote1id', 
                'value': 'vote1' 
            }).inject($('voterform'));
        $('vote_wrapper').setStyle('display','none');
    });

    $('vote2').addEvent('click',function(e) {
        e.stop();  
        new Element('input', { 
                'type': 'hidden', 
                'name': 'winner', 
                'id': 'vote2id', 
                'value': 'vote2' 
            }).inject($('voterform'));
        $('vote_wrapper').setStyle('display','none');   
    });

【讨论】：

你有这个代码的链接吗？如果是这样，这将极大地帮助隔离问题。