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

Question

我最近使用传统注册进行了升级

element.property = function

使用高级注册

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

在函数中，当用户按下 Enter 键时，我返回 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 种有效的形式进行比较时，我没有发现任何差异。

我最近还更新了推文模型，但很明显，表单提交了两次，一次是我通过捕获 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;。