0

したがって、div、1 つのボタン、および 1 つのテキストボックスがあるユースケースです。

テキストボックスのぼかしイベントで、divが展開されます

ボタンをクリックするとアラートが表示されます。

したがって、これらの両方が機能します。しかし、カーソルがテキストボックスにあり、ボタンをクリックしようとすると。するとクリックが上がりません。ボタンが移動したため、クリックが発生していないことを理解しています。それで、私のオプションは何ですか

コードのプランカー

http://plnkr.co/edit/TYXLeE?p=preview

4

3 に答える 3

2

デモ

代わりにマウスダウンを聞いてください。本当にそれがあなたが探しているものです。

  $('#clickAbleButton').on('mousedown',function() {

クリックは 1 つではなく 3 つのイベントであり、それらはすべて同じ要素で発生する必要があります。

  1. マウスダウン
  2. マウスアップ
  3. クリック

要素はマウスアップの前に邪魔にならないので、代わりにマウスダウンをリッスンしてください。

しかし、実際には、なぜクリックの途中でボタンを移動しているのですか? この問題は実際には設計上の問題であり、javascript でハッキングされないように対処する必要があると思います。

于 2013-09-18T23:00:13.903 に答える
0

index.html のクイック ソリューション:

<body>
<h1>Hello Plunker!</h1>
 <input type="button" id="clickAbleButton" value="Click Me" />
<input type="text" id="myInputText" value="Empty Text Box" />
<div style="height:40px;" id="everExpandingDiv">
  This is my container div
</div>

または、script.js の最適なソリューション:

$(function() {
    $('#myInputText').on('mousedown',function()     
    {$('#everExpandingDiv').height($('#everExpandingDiv').height()+20);});
    $('#clickAbleButton').click(function() {
       alert('button click was raised');
    });
});
于 2013-09-18T22:59:22.847 に答える