重写jQuery slideDown事件后，无法用e.preventDefault()取消执行？

你遇到的核心问题是：当前重写的slideDown方法先触发事件，再无条件执行原动画，而且直接用字符串触发的事件默认不会响应preventDefault()的阻止操作，得调整逻辑来支持事件取消机制。

修改后的重写代码 #

把你原有的重写逻辑调整为下面这样，就能实现通过e.preventDefault()取消原slideDown的执行：

; (function ($) {
    var orig_slideDown = $.fn.slideDown;
    $.fn.slideDown = function () {
        // 创建一个支持preventDefault的事件对象
        var slideDownEvent = $.Event('slideDown');
        // 触发自定义事件
        $(this).trigger(slideDownEvent);
        
        // 只有当事件未被阻止时，才执行原slideDown动画
        if (!slideDownEvent.isDefaultPrevented()) {
            orig_slideDown.apply(this, arguments);
        }
        
        // 保持jQuery的链式调用特性
        return this;
    };
})(jQuery);

绑定事件的优化建议 #

另外，建议用on()代替bind()（bind()在jQuery 3.0及以上版本已被弃用），绑定代码可以改成：

$('.step2').on('slideDown', function (e) {
    if (ConditionsNotMet()) {
        e.preventDefault();
    }
});

原理说明 #

1. 我们通过$.Event('slideDown')创建了可取消的事件对象，而非直接用字符串触发事件；
2. 在执行原slideDown方法前，用isDefaultPrevented()检查事件是否被阻止；
3. 当你的条件不满足（ConditionsNotMet()返回true），调用e.preventDefault()后，isDefaultPrevented()会返回true，原动画就不会执行了。

内容的提问来源于stack exchange，提问作者StratMan