如何动态分配DOM事件以及骨干事件？

Question

我想在每个页面上的mousedown上的按钮上附加一个加载程序。

我有一个在布局渲染后触发并在顶层视图中传递的函数，然后抓取每个按钮并在其上附加一个mousedown事件：

attachGlobalButtonEventHandler : function(view){
        view.$el.find('button.viewtag, button.newtag').on('mousedown', function(){
            var $target = $(this);

            $target.addClass('activated');
            $target.prop('disabled', true);
        });
    }

这很好用，但问题是我的按钮骨干事件没有被解雇，看起来像：

events : {
            'click .newtag' : 'gotoCreate'
        },
        gotoCreate : function(evt) {
            evt.preventDefault();

            app.router.navigate('somewhere', true);
        }

如果我删除attachGlobalButtonEventHandler，则newtag上的点击会很好，但如果附加了处理程序，则根本不会触发。如何确保主干点击事件也会触发？

Answer 1

这里的问题是disabled属性，并且执行了订单事件。

mousedown事件发生在click事件之前，mousedown回调中您停用该按钮，从而完全删除了click事件。

检查此jsFiddle。如果您注释掉$(this).prop('disabled', true);行，则click事件将会触发。

通过添加setTimeout，您可以在下一个时间点有效地执行它，有关详细信息，请参阅此jsFiddle。

编辑：我刚注意到@codemonkey添加了一条评论，提示同样的事情。