javascript - 无法停止页面重新加载

Question

使用 events.peventDefault() 和 events.stopPropagation()，无法阻止页面重新加载。

bindSearch: function() {

    var val = null;
    var input = null;
    config.bindThis('chatSearchFriends', 'body', 'searchBar', function(value, events) {

        input = $(value);               
        val = $(input).val();
        timer = setTimeout(doSearch, 1000);
        config.showThis('clearSearch');

        var keycode = (events.keyCode ? events.keyCode : events.which);

        if (keycode == '13' && !events.shiftKey) {
            //prevent page reload
            events.stopPropagation();
            events.preventDefault();

            console.debug('enter');
        }

    });

    config.bindThis('chatClearSearch', 'body', 'clearSearch', function(value, events) {

        //clear search text
    });

    function doSearch() {

      //fetch matched search
    }

},

在上面的代码中，我在 keyup 事件 (chatSearchFriends) 上绑定(bind)了 searchbox。

当用户输入时，如果他们按下回车键，页面不应重新加载，这是我的担心。

无论用户是否按下回车，ajax 都会在 1 秒后获取匹配的数据。这是通过以下行完成的:timer = setTimeout(doSearch, 1000);

所以按 enter 应该只会停止页面重新加载。我不确定为什么上面没有阻止它。

绑定(bind)这个:

bindThis: function(eventKey, bindTo, selectorKey, callback, bindOnceOnly = false) {

                        this.unBindThis(bindTo, eventKey);
                        if (bindOnceOnly) {

                            this.getSelectorDOM(bindTo).one(this.events[eventKey], this.selectors[selectorKey], function(e) {

                            callback(this, e);
                            });

                            return;
                        }

                        this.getSelectorDOM(bindTo).on(this.events[eventKey], this.selectors[selectorKey], function(e) {

                            callback(this, e);
                        });

                    },

Answer 1

In the code above, I bind searchbox on keyup event (chatSearchFriends).

您无法停止按下按键时按键的传播。该事件已经发生。它必须在 keydown 或 keypress 上。