2

我最近从经典注册升级使用

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 种有效的形式进行比较时，我看不出有什么不同。

I also recently updated the Model for Tweet, but is is obvious the form is submitted twice, once when I do it by grabbing the Enter Key, and once when it is sumbitted internally by an "enter key post".

Odd.

/**
 *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;
} ) ();
4

1 回答 1

4

The return value of the event handler does not do anything when used with addEventListener() so returning false is not designed to do what you are trying to do.

If you want to prevent the default behavior, then you need to call event.preventDefault() (and possibly event.stopPropagation() too) like this:

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

Note: this syntax doesn't work in older versions of IE that don't support addEventListener or event.preventDefault(). They have their own way of doing things with attachEvent and window.event.returnValue = false;.

于 2012-05-18T16:43:34.543 回答