tips 前端 点击事件
新手总是时不时会纠结一下 点击事件
我们都知道这些小东西不难 但是偶尔难道不会想想我们可能对这些即使小kiss的问题的认知其实不够清晰 一个认识不清晰的东西使用时 总会有油然而生的不安感 从而用的不放心 不舒坦 何况细节上的处理总是最能表现一个人实际经验是否丰富 技术水平是否可以称为高手的地方
导入jquery.js文件库之后
<script type="javascript">
$(function(){
$('#xx').click(function(){
console.log('xxxxxxx');
})
})
</script>
以上为最常见的写法 用jquery与coffeescript后
<script type="text/coffeescript">
$('#xx').click ->
cosole.log('xxxxxxx')
</script>
传统dom里的click 首先应该知道有个html有个事件属性 onclick 从而很方便的在onclick里直接调用function
而function定义在js脚本文件里 所有主流浏览器都支持此属性 如
<button onclick="regexp()">go regexp</button>
<script>
function regexp(){
console.log('xxxxx');
}
</script>
或者onclick="return regexp()" 效果一样的,不用纠结
form表单里 则常用有onsubmit属性 在点击调交后,文档尚未发送请求前 同步地激活调用的function 用来进行验证，多原始和简单的验证方式
这样function里若return了 false 请求就不会发送
<form method="post" onsubmit="return go_pass()">
<button class="btn" type="submit">go pass</button>
</form> <script>
function go_pass(){
console.log('xxxxx');
if(xxx){
return false;
}
}
</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()"
曾经我见过很奇怪的一种写法
<form method="post" action="/xx/xx">
<button type="submit" onclick="return check()">check</button>
</form>
not recommand
想说这个完全是反面教材 首先不论能否达到目的
最直接的理由是逻辑混乱 语义化不明
以上关于return 或者不加return 对a标签的跳转和onclick的影响也是适用的 (return 会阻止浏览器默认的行为)
只有极少数html元素没有onclick事件属性 这些元素 为<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>
结果是只要是想加点击事件的元素都支持onclick事件属性就是了
此外还有一种传统dom里的onclick 事件属性写法(只是换了种方式罢了,另外也比较少见,但是是等价于onclick的)
document.getElementById("tea").onclick=function(){
console.log('check a');
return false;
console.log('check');
};
至于经验丰富的人用的多的是
$("p").bind("click", function(){
console.log( $(this).text() );
});
或者 视情况（涉及到异步加载进来的元素或者脚本时，由于页面渲染已经完成，事件已经绑定过一次，或者....通过事件委托和起泡,绑定点击事件）
$("body").on("click",'.resp_click' function(){
console.log( 'xxxx' );
});
对于未来可能会新加进来的元素仍能起效的, jquery除了on,以前还有一个live(不过1.9后官方已废弃了,目前用着1.8.2的jquery中文api译本的童鞋大概需要注意下)
这样做有些好处 当某个情况下我不要这个点击事件时我可以解绑,可以很方便的传递数据等(详见jquery手册bind 与unbind on 与off)
function handler(event) {
cosole.log(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
//和
$("p").unbind( "click" );
另外onclick有好几种写法 现在网页上的点击事件有很多其实是这样的
<a href="javascript:void(0)" onclick="do()">xxxxx</a>
并不推荐在a的href里使用javascript:协议 可能会遇到问题 比如这会导致点击时在ie下gif停止播放
其实可以这样
<a href="#" onclick="do();return false;">xxxx</a>
但这样在ie6下可能会由于href先触发 页面刷新了一次而使浏览器舍弃了do()的执行
不过好的是现在是2015年,ie6已经可以说退出历史舞台了
此外较少见的方式还有(其实也不少见,新人估计会少见趴)
element.addEventListener('click', function() { xxxxxx }, false);
需要注意的是在ie9及以上 才可用 但支持主流浏览器
ie9以下 请使用：element.attachEvent('onclick', function() { xxxxx });
此方式也work 用起来感觉很棒
尤其是在最近开始火起来的移动端互联网开发里 有一个touch 事件 这些响应式的网页里这种事件监听的脚本写法是很常见的
比如这样封装一下 引自 http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick
function addEvent(element, evnt, funct){
if (element.attachEvent) return element.attachEvent('on'+evnt, funct);
else return element.addEventListener(evnt, funct, false);
}
// example
addEvent(
document.getElementById('myElement'),
'click',
function () { alert('hi!'); }
);
或者类似这样 引自:http://jackleechina.iteye.com/blog/1595397
if(window.addEventListener){ // Mozilla, Netscape, Firefox
//element.addEventListener(type,listener,useCapture);
button.addEventListener('click', alert('11'), false);
button.addEventListener('click', alert('12'), false);
//执行顺序11 -> 12
}
else { // IE
button.attachEvent('onclick', function(){alert('21');});
button.attachEvent('onclick', function(){alert('22');});
//执行顺序22 -> 21
}
通用的是click点击事件 但是因为click事件在移动端会出现延迟响应的情况 约200ms,触发移动端的点击常用tap事件来代替
关于事件监听器 分离在后面的tips详细点总结下
http://i.cnblogs.com/EditPosts.aspx?opt=1
tips 前端 点击事件的更多相关文章
- [前端][自定义DOM事件]不使用setTimeout实现双击事件或n击事件
使用setTimeout实现双击事件 例如,这样: let div = document.getElementById("div"); doubleClick(div, funct ...
- 微信小程序tips集合:无法输入文字/随时查看页面/元素审查/点击事件/数据绑定
1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时 ...
- 【前端】vue2.x 配合 bootstrapTable 动态添加元素和绑定点击事件，事件无效 解决
背景: 使用bootstrap-table 表格插件时,每一行的最后一班会加操作按钮列.如果不加入vue的话,使用插件自己的列属性formatter:function(value, row, inde ...
- asp.net 页面上的点击事件
asp.net 页面上 服务器端控件Button 有两个click事件如 <asp:Button ID="Button1" runat="server" ...
- 今天依然是 JQ点击事件之“点击淡入淡出事件”
废话不多说,先贴代码,再解释 <script> $(document).ready(function(){ $("button").click(function(){ ...
- 如何绑定android点击事件--跳转到另一个页面并实现关闭功能？
一.点击按钮跳转到另一个页面. eg:实现从一个页面点击跳转到另一个页面 1.首先在一个布局文件(.XML)中绘画了一个跳转按钮(id为btn1): <Button androi ...
- Unity3D开发之NGUI点击事件穿透响应处理
http://www.xuebuyuan.com/1936292.html 在使用NGUI 开发2D项目的时候,发现了一个问题,就是如果点出一个菜单,然后点击菜单上面的按钮的时候就会使得按钮下面的物品 ...
- 【转】Android - Button(按钮)的响应点击事件的4种写法
原文网址:http://www.yrom.net/blog/2011/12/12/android-4-onclicklistener-of-button/ Button控件setOnclickList ...
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
随机推荐
- delphi的消息对话框
delphi的消息对话框,类似VFP中的WAIT和MESSAGEBOXdelphi的消息对话框,类似VFP中的WAIT和MESSAGEBOX1.最简单的是:showmessage() 它只有一个OK按 ...
- Facebook Reporting API -- Facebook 数据导出API
1.获取token 浏览器打开 "访问口令工具" (FB链接请FQ) https://developers.facebook.com/tools/accesstoken/ App ...
- Linux设置下载站点
https://blog.csdn.net/jfhkd2012/article/details/50912757
- POJ：2674-Linear world（名字交换碰撞）
Linear world Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 4514 Accepted: 1025 Descript ...
- C++ 二叉搜索树
二叉搜索树利用其特有的二叉树性质,使其搜索更方便 源代码: struct node { int val; node *left, *right; }; //the function of insert ...
- VIM 如何切换buffer
命令 :ls 可查看当前已打开的buffer 命令 :b num 可切换buffer (num为buffer list中的编号) 其它命令: :bn -- buffer列表中下一个 buffer :b ...
- html---Web Storage存储
在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以在客户端本地保存数据的Web Storage功能,之前可以使用Cookies在客户端保存如用户名等简单用户信息,但通过长期使用 ...
- quick sort去除无用判断
#include <stdio.h> #include <stdlib.h> //int a[]={1000,10000,9,10,30,20,50,23,90,100,10} ...
- CodeIgniter学习笔记一：基本结构、控制器、视图、超级对象、数据库
一.基本结构 CodeIgniter3.0.0解压后有8个文件,分别是: application:项目文件 system:系统(框架)文件,为方便升级,不建议修改 user_guid:用户手册,不需要 ...
- uiautomator+cucumber实现移动app自动化测试
前提 由于公司业务要求,所以自动化测试要达到以下几点: 跨应用的测试 测试用例可读性强 测试报告可读性强 对失败的用例有截图保存并在报告中体现 基于以上几点,在对自动化测试框架选型的时候就选择了uia ...