如何定义一个事件来更改具有不同事件的元素？

Question

对于模糊的标题，抱歉，很难用一行字来解释...

无论如何，假设我有一个按钮，其操作由 data-action 属性定义。当用户单击该按钮时，会发生一些事情，并且按钮的操作将更改为第二状态。

然而，在实现这一点时，我发现为第二个状态定义的事件在触发第一个状态后会自动运行，就好像“单击”在函数调用之后持续存在并触发第二个事件一样。

这是一个 jsFiddle

单击一次应显示日志“转换为“foo””，第二次单击应显示日志“转换为“bar””，但如果您尝试一下，您会看到两个事件都被触发。

我怎样才能阻止这个？

编辑：感谢 Dimitar 的帮助 -

var action = ((this.retrieve('action', 'foo') != this.getProperty('data-action')) ? 'bar' : 'foo' );
if (action == 'foo') {
    console.log('executing "foo"');
    this.store('action', 'bar');
}
else {
    console.log('executing "bar"');
    this.store('action', 'foo');
}

Answer 1

就像洛伦佐所说，当你委托它并更改用作委托标识符的属性时，这对我来说听起来像是反模式。我认为添加延迟也不是一个好的模式。

要么使用在元素上更改的第二个属性，或者更好的是，更改一个 var，该 var 在初始事件从属性读取状态后将状态保留在元素存储中以提高性能。

$(document.body).addEvents({
    'click:relay([data-action=foo])': function() {
        this.store("action", ((this.retrieve("action") || this.get("data-action")) === 'foo') ? 'bar' : 'foo');
        this.set("html", 'State + ' + this.retrieve("action"));
    }
});

Answer 2

很好的情况:)

我看到更改事件处理程序声明的顺序解决了第一次单击的问题（并推迟了下一次单击的问题）。

而且，我认为 Mootools 上没有问题：您单击按钮，事件将 DOM 向上冒泡到主体，主体检查所有其附加事件（在您的情况下是委托的）并首先停止，因为它找到了匹配项[data-action="bar"]。并执行相关函数。主体现在继续检查其他委托匹配（它没有理由停止！），并找到第二个再次匹配的 [data-action="foo"]。

恐怕如果不使用一些标志/状态变量或延迟函数执行，你就无法避免这种情况。我认为最后一个是最好的，或者至少是最简洁的解决方案（如果适用，我不知道延迟是否会给您带来问题）。如果您稍微延迟函数执行（以毫秒为单位），您只需跳过委托事件检查。演示此处。