Question

我最近使用

从经典注册升级

element.property = function

使用

进行高级注册

element.addEventListener( "property", function,  bool );

在函数中，当用户按下回车键时，我返回了一个false以禁用表单提交：

tweet_input.addEventListener( "keypress", function( event )
{ 
    if( event.keyCode === 13 )
    {
       new ModelTweet().invoke(); 
       return false;
    }
}, false );

但是，这不再有效，每次用户点击回车键时，都会提交表单。

HTML看起来像这样：

  <form id="tweet" method="post" name="tweet">
    <div id="tweet_input_wrap">
      <input id="tweet_input" name="tweet" type="text" maxlength="40">
        <p id="tweet_label">Comment
        </p>
      </input>
    </div>
    <p id="tweet_button" href="javascript:void(0)">Share
    </p>
    <div id="tweet_response" class="response">
    </div>
    <div id="tweet_fill">
      <!--TWEET FILL 
      -->
    </div>
  </form>

我在其他3种形式上使用此方法，并且工作正常。

更新到高级注册是我做的最后一次重大改变，但由于其他3种形式运作良好......我不明白这是什么问题。

当我将代码与其他3种有效的形式进行比较时，我没有看到区别。

我最近也更新了Tweet模型，但很明显表单提交了两次，一次是通过抓取Enter键来实现的，一次是通过“输入密钥帖子”在内部进行汇总。

奇

/**
 *ModelTweet
 */

var ModelTweet = ( function() 
{
    var ModelTweetI = function ( )
    {
        this.form_elements = document.getElementById( 'tweet' ).elements, 
        this.response_element = document.getElementById( 'tweet_response' );
        this.fill_element = document.getElementById( 'tweet_fill' );

        this.text_object = new TextValidator( this.form_elements );
        this.message_object = new Message( this.response_element );
        this.effects_object= new Effects( this.response_element );

        this.ajax_object = new AjaxRequest();
        this.shared_object = new Shared();

        this.TIME = this.shared_object.get( 'TIME' );
        this.load_on = this.shared_object.get( 'load_on' );
    };
    ModelTweetI.prototype.invoke = function( ) 
    {
        if( this.load_on === 1 )
        {
            if( !this.text_object.checkEmpty() ) 
            {
                this.message_object.display( 'empty' );
                this.effects_object.fade( 'down', this.TIME );
                return false;
            }
            if( !this.text_object.checkPattern( 'tweet' ) ) 
            {
                this.message_object.display( 'tweet' );
                this.effects_object.fade( 'down', this.TIME );
                return false;
            }
        }
        var response_element = this.response_element;
        var fill_element = this.fill_element;
        this.ajax_object.invoke( this.ajax_object.serializeArray( this.form_elements ) + '&ajax_type=tweet_control', function( server_response_text ) { new AjaxResponse( server_response_text, 'tweet', response_element, fill_element ); } );
        var tweet_input = document.getElementById( 'tweet_input' );
            tweet_input.value='';
            tweet_input.blur();
        }
    };
    return ModelTweetI;
} ) ();

Answer 1

与addEventListener()一起使用时，事件处理程序的返回值不会执行任何操作，因此返回false并不是为了执行您要执行的操作而设计的。

如果您想阻止默认行为，那么您需要像这样调用event.preventDefault()（可能还有event.stopPropagation()）：

tweet_input.addEventListener( "keypress", function( event )
{ 
    if( event.keyCode === 13 )
    {
       new ModelTweet().invoke(); 
       event.preventDefault();
    }
}, false );

注意：此语法在不支持addEventListener或event.preventDefault()的旧版IE中不起作用。他们有自己的方式attachEvent和window.event.returnValue = false;。

更新到addEventListener可能导致函数的返回值不传播？

1 个答案: