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

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>

由于某种原因，即使我阻止了任何 <input type="text"> 中点击事件的默认操作字段，它仍然触发 .click()唯一的<button> ，这不是按 Enter 键时用于提交表单的那个。 (我想要输入按钮来提交表单。)

我的事件监听器代码是:

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

首先，我测试了event.clientX , event.clientY $('#clearForm').click()内，在用户单击元素的最左上角部分的情况下。我注意到它与 (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”按键。