フォーム入力項目はラベルを使用し、Bootstrap ライブラリを参照するため、入力クリック効果領域が増加します。

产品姐姐想法多，点击input项才能聚焦进行操作，点击外部不能有反应

ラベルをよりセマンティックにするために、フォームアイテムをラップするラベルをよく使用します

<label for="label-input"><input type="text" class="" id="label-input"><br><button>buttonbutton>label>

モバイルプラットフォームページの開発では、フォームアイテムのクリック可能な領域を大きくするために、操作性が向上すると、ラベルはそれに応じた利便性を提供できます。

ただし、ラベルが必要なだけの場合もありますが、理由もなくクリック可能な領域が増加することは望ましくありません。 Bootstrap の導入により、クリック可能な領域が自動的に増加します

上の図に示すように、入力項目をクリックするだけで効果が期待できますが、ラベル label 内の他の空白領域をクリックするとトリガーされます。 (ボタンをクリックしてもトリガーされないことに注意してください)

は Bootstrap のスタイル ライブラリ

<link rel="stylesheet" type="text/css" href="bootstrap.min.css?1.2.45">

を導入したばかりです。これを解決するには、 イベント によってトリガーされる オブジェクト を特定してみてください。しかし、それは無効であり、常にINPUTラベルであり、非科学的です

$('#label-input').click(function(e) {var elem = e.target;
    console.log(elem.tagName);if (elem.tagName !== 'INPUT') {return false;
    }
})

どうすればよいですか

私は方法を考え、ラベルをクリックするモニターを設定しました、そして直接 false を返します、OK~

$('label').click(function() {return false;
});

$('#label-input').click(function(e) {var elem = e.target;
    console.log(elem.tagName);
})