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

时间:2017-08-22 02:24:34

标签: javascript jquery

我的表格看起来像这样:

      <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()的{​​{1}},这是用于提交表单的那个,当按Enter键时。 (我希望输入按钮提交表单。)

我的事件监听器代码是:

<button>

如果有的话,我在事件消费方面做错了什么? 如果需要,可以使用完整的网站here

1 个答案:

答案 0 :(得分:0)

经过一番无望的瞄准后,我想到了一些事情:

如果某个元素在其外部“发生”,则不会发生单击。

我以为我会将这个事实转化为代码,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,则“点击”没有发生,您应该将其视为可能是“输入”按键。