输入文本输入触发按钮点击

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'按键它可能是。