高さ/コンテンツがジャンプしているときにクリックイベントが発生しない

Question

フィールドの下にショーの検証エラーのあるフォームがあります。 blurイベントの検証エラーを示します。問題は、リンクをクリックしたときにエラーメッセージが表示された場合、このフォームの下のリンクをクリックできないことです。問題は、エラーメッセージがクリックイベントのDOMおよび位置に注入された後、実際のリンクがダウンしているという事実に関連している問題を再現するにはリンクの上

、それ以上

<form name="myForm" ng-model-options="{updateOn: 'blur'}"> 
    <input type="text" name="firstName" ng-model="firstName" required> 
    <div style="color:red; margin-top: 20px" ng-if="myForm.firstName.$touched && myForm.firstName.$invalid"> 
     Required field 
    </div> 
    </form> 
    <a href="https://www.google.com" target="_blank">Static link</a> 
    <a href="" ng-click="linkClick()">Click Me</a> 

angular.module('formExample', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
    $scope.firstName = 'test'; 
    $scope.linkClick = function(){ 
     alert('link click'); 
    } 
    }]); 

Example Plunker

ではありません入力テキストを削除し、リンクをクリックして（ぼかしイベントをトリガーする）。警告は表示されません。もう一度クリックすると、それが実行されます。それは（フォームを使用してすべてのページを）一般的な方法で動作させるためにどのよう

私は、リンク（または何か他）をクリックするたびに、このクリックイベントに関係なく、コンテンツのジャンプを解雇することを

Answer 1

ぼかしが前に起こるからですクリックイベント。イベントの順序は次のとおりです。

• マウスダウン
• ぼかし
• のmouseup
• クリック

このエフェクトに（つまり、誰かタブ離れてからキーボードイベントを取るさらに興味深いかどうかを取得します入力フィールド）

タブキーのイベントのキーボード順は、

です。

1. 変更：
   • のKeyDown
   • ぼかし
   • からkeyup

   は、したがって、あなたが2つのソリューションを持っている（あなたはまた、タブ以外の他のキーのキー押下イベントを持っています） clickイベントをマウス操作とkeydownイベントに変換します。

2. エラーメッセージを入力する前に、ブラーイベントに1000ミリ秒の遅延を追加します。

私はまだクリックを使用することができます私は別のkeydownイベントについて心配する必要はないので、私は＃2が良いのが好きです。