入力テキストは、トリガーボタンを入力して、私はこのようになりますフォーム持って

Question

をクリックしてください：私はどの<input type="text">フィールドにクリックイベントのデフォルトの動作を妨げた場合でも、それはまだ.click()をトリガし、

 <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> 

といくつかの理由のために<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)のどこにもいなかったことに気づいた。だから、私の具体的なケースでは、私は$('#clearForm').click()コールバック体内

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(); 
} 

を言って、それが働きました。

：ご使用のバージョンのjQueryがこのように動作していない可能性があります。その場合、$(this).offset()をチェックし、event.clientX < $(this).offset().left && event.clientY < $(this).offset().topの場合は、「クリック」が発生せず、おそらく 'Enter'キーのように扱う必要があります。