Jqueryは1つのイベントのみを起動する必要があります

Question

Enterボタンとクリックの2つのスクリプトを作成しましたが、両方のイベントが発生しています。入力するボタンをkeyup/keydown/keypress/pasteでクリックしてから変更しますキーアップ/ keydown/keypress/pasteでうまくいけば、1つのイベントだけが起動するはずです。

$('#txtName').on('keypress keyup paste', function (e) { 
    var keyCode = e.keyCode || e.which; 
    if (keyCode === 13) { 
     AddName($('#txtName').val()); 
    } 
}); 

$('#txtName').on({ 
    change: function() { AddName($('#txtName').val()); } 
}); 

Answer 1

原因：キーリスナーで2つのイベントを使用しているためです。 keypressまたはkeyupイベントのいずれかを使用してください。

そして、event.preventDefault();を追加すると、イベントは停止しますが、これはchangeイベントをトリガーしません。

$('#txtName').on('keyup paste', function (e) { 
 
    var keyCode = e.keyCode || e.which; 
 
    if (keyCode === 13) { 
 
     e.preventDefault(); 
 
     AddName($('#txtName').val(),e); 
 
     
 
    } 
 
}); 
 

 
$('#txtName').on({ 
 
    change: function (e) { AddName($('#txtName').val(),e); } 
 
}); 
 

 
function AddName(value,e) 
 
{ 
 
    console.log(e.type+ " - "+value); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="txtName">

Answer 2

ユーザーが（押した後）キーを離したときに、ユーザーを押してキー、からkeyupイベントが火災でKeyPressイベント火災。したがって、一度に1つのイベントを発生させたい場合は、キー押下ORキーアップを使用する必要があります。

Answer 3

入力ボックスが#txtNameの場合、changeイベントは、要素がフォーカスを失うまで延期され、値が以前の状態から変更された場合にトリガーされます。あなたの要件については

、あなたはjquery.on上のすべてのイベントを組み合わせて、のようなハンドラ内であなたのロジックを追加することができます両方のシングルのために（異なる段階で）トリガされkeyup`

$('#txtName').on('keypress keyup paste change', function (e) { 
    var keyCode = e.keyCode || e.which; 
    if (e.type == "change") { 
     AddName($('#txtName').val()); 
    } 
    else if (keyCode === 13) { 
     AddName($('#txtName').val()); 
    } 
}); 

function AddName() { 
    // Your code here 
}