web-dev-qa-db-ja.com

入力がキープレスイベントを2回発生させる

この質問は以前に（ほとんど）質問/回答されていますが、イベントのバブリングを防ぐために3つのことを試みましたが、何も機能しませんでした。

return false;
e.stopPropagation();
e.preventDefault();

（falseを返すと、他の2つが処理されます、正しいですか？）

これがhtmlです：

<div class="tags-holder">
    <input type="text" class="addField" id="addField_<%= visit.id %>"  placeholder="add a new tag">
</div>

そしてJS（UPDATE CLEANED UP）：

    $('.addField').show().keyup(function(event){
  event.preventDefault();

      if(event.keyCode == 13 || event.keyCode==9) {
    ProfilePage.createTag( this, 'nada', 'addField')
        $(this).hide().val('');

        return false;       
   }

}）;

私はそこに冗長なストッパーを残しましたが、本当にfalseを返して泡を殺すべきではありませんか？ （Chromeを使用）。

手がかり？ keyCode = 13は「Enter」です

javascriptjquerydomjavascript-events
21
bear

ワオ。あなたの助けは素晴らしく、私がそれを考えるのを助けました。

しかし、解決策は警官隊のように感じられます。効果的ですが、条件がそもそも存在するべきではありません。

ここにあります。ここからのコメントで見つけました： http://yuji.wordpress.com/2010/02/22/jquery-click-event-fires-twice/

    $('.plus').unbind('click').bind('click',function(e){    
console.log('clicked')
    var id=$(this).attr('plus_id');
    var field=$('<input type="text">').attr({'placeholder':'add a new tag','id': 'addField_' + id, 'visit_id':id});
    field.focus();
    field.show().keydown(function(event){
        event.stopImmediatePropagation();
        if(event.keyCode == 13 || event.keyCode==9) {
            console.log(event)
            ProfilePage.createTag( field, 'nada', 'addField')
            field.hide().val('');
            return false;       
        }
    }).click(function(e){
        return false;
    })
    ;
$(this).append(field);
return false;       
   });
11
bear

私は同じ問題を抱えており、上記の方法を使用しましたが、それは私にとってはうまくいきました。

$(document).unbind('keypress').bind('keypress', function (e) {
   // some logic here
});
8
Goyat Parmod

最初にイベントのバインドを解除してからバインドしてください。以下のコードを参照してください。

$('.addField').show().unbind('keyup').keyup(function(event){
 event.preventDefault();

  if(event.keyCode == 13 || event.keyCode==9) {
ProfilePage.createTag( this, 'nada', 'addField')
    $(this).hide().val('');

    return false;       
}

説明は here です。これについて新しいブログに投稿していました。

7
Ghost-Man

これで問題が解決することを願っています。 event.preventDefault（）を使用する代わりに、以下に示す2つを使用してください。 Microsoftブラウザーの場合は、event.cancelBubble = true;を使用します。 W3Cモデルブラウザーの場合、event.stopPropagation（）;を使用します。

そして、Keyupイベントの代わりに、親切にkeypressイベントを使用してください。キーを押している間、入力は入力フィールドに送信されるため、表示したくない入力はすべてフィールドに表示されます。したがって、Enterボタンイベントがトリガーされます。

Falseを返す代わりに、event.returnValue = falseを使用します。

1
AmGates

のすべてのインスタンスを変更してみてください

$(field).functionCall()

に

field.functionCall()

フィールドはすでにjQueryオブジェクトであるためです。

これでエラーではないことがわかりました。私はFirefox 7とChrome 15でテストしましたが、Enterステートメントが押されたときにifステートメントのコードブロックが一度だけ実行されることを確認しました。createTag（）関数内の何かがチェックされていないことを確認してください何かを二度やっていない。

0
Yes Barry

これは常に私を狂気にさせる問題ですが、これは単にfalseを返す解決策だと思います。trueを返すと、ランダムに繰り返されるため、真の応答をリッスンするリスナーが必要だと思います。

短い回答の追加はfalseを返します。

$("#register-form #first_name").keyup(function(event) {
console.log('hello world');
return false;

}）;

元の質問でコードを詳しく見ると、falseが1行早く記述されているようです。

0
Daniel Lee

あなたはそれが泡立つときにイベントをキャッチしていると思いますか。このテストページでは1回だけ発砲します。

<!DOCTYPE html>
<html>
  <head>
    <title>Scratch</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.setOnLoadCallback(function (){
        $('input[type="text"]').keyup(function (){
          console.debug('keyup');
        });
      });
      google.load('jquery', '1.6.4');
    </script>
  </head>
  <body>

    <div class="something">
      <input type="text" />
    </div>
  </body>
</html>

多分それはあなたのセレクターです。別の.addTag内にネストされていますか？ jQueryセレクターを変更し、divを作成して同じクラスを入力すると、2つのイベントが発生し始めます。このような：

$('.thing').show().keyup(...);

...そして...

<div class="thing">
    <input class="thing" type="text" />
</div>
0
mqsoh