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

我的事件监听器代码是：

<button>

如果有的话，我在事件消费方面做错了什么？如果需要，可以使用完整的网站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，则“点击”没有发生，您应该将其视为可能是“输入”按键。

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

1 个答案: