tips 前端点击事件

新手总是时不时会纠结一下点击事件
我们都知道这些小东西不难但是偶尔难道不会想想我们可能对这些即使小kiss的问题的认知其实不够清晰一个认识不清晰的东西使用时总会有油然而生的不安感从而用的不放心不舒坦何况细节上的处理总是最能表现一个人实际经验是否丰富技术水平是否可以称为高手的地方
导入jquery.js文件库之后

1 <script type="javascript">    
2        $(function(){
3                $('#xx').click(function(){
4                             console.log('xxxxxxx');
5                 })
6         })
7 </script>

以上为最常见的写法用jquery与coffeescript后

1 <script type="text/coffeescript">
2           $('#xx').click ->
3                                cosole.log('xxxxxxx')
4 </script>

传统dom里的click 首先应该知道有个html有个事件属性 onclick 从而很方便的在onclick里直接调用function
而function定义在js脚本文件里所有主流浏览器都支持此属性如

1 <button onclick="regexp()">go regexp</button>
2 <script>
3         function regexp(){
4                console.log('xxxxx');
5         }
6 </script>

或者onclick="return regexp()" 效果一样的,不用纠结

form表单里则常用有onsubmit属性在点击调交后,文档尚未发送请求前同步地激活调用的function 用来进行验证，多原始和简单的验证方式
这样function里若return了 false 请求就不会发送

 1 <form method="post" onsubmit="return go_pass()">
 2  <button class="btn" type="submit">go pass</button> 
 3 </form>
 4 
 5 <script>
 6        function go_pass(){
 7           console.log('xxxxx');
 8           if(xxx){
 9                      return false;
10           }                               
11        }
12 </script>

function里有的人会简写成 return; 不写false,return为空为null将同样终止function执行其效用和return false是完全一样的因为return false后其后的语句同样不会被执行 return false的目的: 就是终止函数执行

概括一下，函数里return后的语句不会被执行无论return的是什么 true or false or null or whatever

需要注意的是逻辑上跳转action 与function是否执行是独立的两部分 w3c也不会把它们混杂在一起
onsubmit这里有必要解释一下 onsubmit="return go_pass()"
当你需要做一个对是否执行function后跳转action的判断时请使用 onsubmit="return go_pass()"

曾经我见过很奇怪的一种写法

1 <form method="post" action="/xx/xx">
2       <button type="submit" onclick="return check()">check</button>
3 </form>

not recommand