jquery – 具有大量可点击区域的HTML表单

<div>    <!-- start of clickable area of page -->
<form>
    <input type="hidden"...>
    <input type="hidden"...>
    <div>
        xxxxx
    </div>
    <div>
        xxxxx
    </div>
</form>
</div>    <!-- end of clickable area of page -->

由于您的表单除了提交之外不需要任何用户交互,因此您可以将 onclick event的处理程序绑定到整个表单.在该处理函数中,提交表单.

例如：

jQuery('form').on('click',function() {
  jQuery(this).submit();
});


/* This part purely for demonstration purposes */
jQuery('form').on('submit',function() {
  console.log('SUBMITTED!');
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="hidden" ...>
  <input type="hidden" ...>
  <div>
    xxxxx
  </div>
  <div>
    xxxxx
  </div>
</form>

供参考,见on()和submit().
作为on()的替代,您可以使用click().

顺便说一句,您可能只能使用DOM submission method：

this.submit();

我使用jQuery来触发提交,因为我想捕获提交事件以显示用于演示目的的消息. DOM提交方法不会触发jQuery的提交事件.见Jquery submit vs. javascript submit.

编辑：

回答评论中的问题：

不,你可以把它放在这样的处理函数中：

jQuery('form').on('click',function() {
  this.submit();
});

除非您想要三种形式中的每一种都有不同的功能,否则我建议将一个处理程序绑定到所有这些形式.下面,我给了每个表单相同的类,并将处理程序绑定到该类.

如果页面上不存在其他表单,则可以绑定到每个表单标记：jQuery(‘form’).我更喜欢用一堂课来保持井井有条.我可能稍后添加另一个表单,我不想受此处理程序的影响,忘记了每个表单都绑定了一个处理程序.

jQuery('.clickform').on('click',function() {
  jQuery(this).submit();
});

/* This part purely for demonstration purposes */
jQuery('.clickform').on('submit',function() {
  var name = jQuery(this).data('name');
  console.log('Submitted ' + name);
  return false;
});

.clickform {
  border: 1px solid gray;
  margin: 0 0 .5em;
  padding: .25em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="clickform" action="" method="post" enctype="application/x-www-form-urlencoded" data-name="form #1">
  <input type="hidden" name="hidden1" value="value1">
  <input type="hidden" name="hidden2" value="value2">
  <div>Form 1,Content 1</div>
  <div>Form 1,Content 2</div>
</form>

<form class="clickform" action="" method="post" enctype="application/x-www-form-urlencoded" data-name="form #2">
  <input type="hidden" name="hidden1" value="value1">
  <input type="hidden" name="hidden2" value="value2">
  <div>Form 2,Content 1</div>
  <div>Form 2,Content 2</div>
</form>

<form class="clickform" action="" method="post" enctype="application/x-www-form-urlencoded" data-name="form #3">
  <input type="hidden" name="hidden1" value="value1">
  <input type="hidden" name="hidden2" value="value2">
  <div>Form 3,Content 1</div>
  <div>Form 3,Content 2</div>
</form>

注意在处理函数中使用this keyword.在此上下文中,这指的是单击的特定表单元素,因为它是事件发生的位置.

见this: As a DOM event handler