輸入文本輸入觸發按鈕點擊

Question

我有形式，看起來像這樣：

 <form> 
     Place straightedge/yardstick along width of pothole such that it points at the corners, <a class="showImage">like this</a> 
     <span class="row"> 
      <label class="firstColumn seventeenTwentieths">Pothole width (in inches): </label> 
      <input type="text" class="secondColumn tenth numberField" id="potholeWidth" /> 
     </span> 
     <span class="rowTight"> 
      <label class="firstColumn seventeenTwentieths">Interval size (in inches, default 1 inch): </label> 
      <input type="text" class="secondColumn tenth numberField" id="intervalSize" value="1" /> 
     </span> 
     <div class="rowTight"> 
      <label class="firstColumn">Do any of the edges intersect the straightedge/yardstick other than at the corners?</label> 
      <div class="secondColumn"> 
      <span> 
       <input type="radio" name="concaveEdges" id="yesConcaveEdges" /> 
       <label for="yesConcaveEdges">Yes</label> 
      </span> 
      <br> 
      <span> 
       <input type="radio" name="concaveEdges" id="noConcaveEdges" checked /> 
       <label for="noConcaveEdges">No</label> 
      </span> 
      </div> 
     </div> 
     <span class="rowTight"> 
      <label class="firstColumn half">Spreadsheet name: </label> 
      <input type="text" class="secondColumn nineTwentieths" id="spreadsheetName"/> 
     </span> 
     <span class="center row"> 
      <button class="center" id="clearForm">Clear</button> 
      <input type="submit" class="center action" value="Create spreadsheet" /> 
     </span> 
     </form> 

，由於某種原因，甚至當我阻止上的click事件的默認操作中的任何<input type="text">領域，它仍然觸發.click()對於唯一的<button>，這是而不是用於提交表單的時候，按回車。 （我想確認按鈕提交表單。）

我的事件偵聽器的代碼是這樣的：

$(document).ready(function(){ 
     $('a.showImage').click(showImage); 
     $('#imageContainer .close').click(hideImage); 
     $('#clearForm').click(function(event) { 
      clearForm(); 
      event.preventDefault(); 
     }); 
     // prevent default action when user clicks a button 
     /*$('input[type="submit"], button').each(function(index) { 
      $(this).click(function(event) { 
       //if ($(this) == $('input[type="submit"]')) 
       if (index == 0) 
        submitFormData(); 
       event.preventDefault(); 
      }); 
     });*/ 

     $('input[type="submit"]').click(function(event) { 
      event.preventDefault(); 
      submitFormData(); 

     }); 

     $('#emailLink').click(emailLink); 



     $('input[type="text"]').each(function() { 
      var that = this; 
      $(this).keyup(function(event) { 
       // allow for 'submit' on enter button for any field 
       if (event.key == 'Enter') 
       { 
        event.preventDefault(); 
        submitFormData(); 

       } 
       // if this is a numberField, validate it like one 
       else if ($(that).hasClass('numberField')) 
       { 
        // blacklisting again!! 
        if ((!event.key.match(/[,.\d]/)) && (event.key != 'Tab')) 
        { 
         if (!$(that).hasClass('invalid')) $(that).addClass('invalid'); 
        } 
        // if user 'Backspace'd or 'Delete'd on something 
        if ((event.key == 'Backspace') || (event.key == 'Delete')) 
        { 
         // make sure that only the allowed characters are in the field 
         if ($(that).val().match(/^\d{1,3}\.?\d*$/)) 
         { 
          if ($(that).hasClass('invalid')) $(that).removeClass('invalid'); 
         } 
        } 

       } 
      }); 
     }); 

    }) 

什麼，如果有的話，我會在事件消耗做錯了什麼？ 如果需要，可以提供完整網站here。

Answer 1

經過一番絕望瞄準，我想到了什麼：

如果「碰巧」在它之外的元素上的點擊並沒有發生。

我以爲我會這一事實轉換成代碼，based on this

首先，我的$('#clearForm').click()內測試event.clientX，event.clientY，在用戶點擊的情況下，對元素的左上角，大部分。我注意到它距離我期待的(0,0)很近。所以，在我的具體情況下，我說

console.log('Coordinates of click event: (' + event.clientX + ', ' + event.clientY + ')'); 
// if the event actually came from the #clearForm 
if ((event.clientX >= 1) && (event.clientY >= 1)) 
{ 
    // clear the form 
    clearForm(); 
} 

裏面的$('#clearForm').click()回調體，它的工作。

注意（對於有此問題的其他人）：您的jQuery版本可能不會像這樣操作。在這種情況下，你會想檢查$(this).offset()，如果event.clientX < $(this).offset().left && event.clientY < $(this).offset().top，那麼「點擊」沒有發生，你應該把它看作是'Enter'按鍵它可能是。