jquery - 这个切换按钮如何通过 CSS 工作？

Question

谁能解释一下酷炫的开/关按钮是如何工作的？ http://proto.io/freebies/onoff/

我想设置一个预防检查，看看用户是否真的想切换按钮。比如

$(document).on('change', '.onoffswitch',function(event){...

http://jsfiddle.net/aGZ7Y/2/

如您所见，change 事件已触发但并未停止 switch 行为。

这只是通过纯CSS 完成的。 我什至不知道为什么点击按钮后会触发更改。 (因为我发现复选框已设置为显示:无)

非常感谢。

Answer 1

您也需要在 label 元素而不是 div 元素中使用点击处理程序

change event在值更改后触发，因此它不是可取消的事件。

$(document).on('click', '.onoffswitch-label', function (event) {
    if (!confirm("sure to switch?")) {
        return false;
    }
});

演示:Fiddle