实例解析jQuery中如何取消后续执行内容


Posted in Javascript onDecember 01, 2016
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script type="text/javascript">
 //点击a标签,不进行页面跳转
 window.onload = function () {
  var obj = document.getElementById("myhref");
  obj.onclick = function (event) {
  //取消默认行为
  //return false;
  //分浏览器
  //IE下
  //01.第一道能力检测
  event = event || window.event;
  if (event.preventDefault) {

   //非IE下
   event.preventDefault();
  } else {
   event.returnValue = false;
  }  
  };
 }
 </script>
</head>
<body>
 <a id="myhref" href="http://www.baidu.com">去百度</a>
</body>
</html>

这里的a标签的点击效果本来是要跳转到百度页面的,但是我们通过参数取消默认行为的方式可以让这个点击事件的后续内容不执行。

有时候会遇到 同一个标签上点击后有多个事件,如果只想执行第一个事件而放弃后面的事件,可以加上一段代码来阻止:

<span onclick="alert('后面的不会执行了!');event.stopPropagation();">click me!</span>

jquery怎阻止后绑定的事件

你的代码在页面载入过程中已经完成事件绑定了,没有阻止后绑定的事件的办法了,不过可以删除当前指定节点的事件绑定。方法如下:

$("#btn").click(function(){
if($("#tx").val()==""){
alert("e1");
}else{
//删除后绑定的事件。。。
$("#btn").unbind('click');
}
});

说明:

unbind([type],[data])
bind()的反向操作,从每一个匹配的元素中删除绑定的事件。

如果没有参数,则删除所有绑定的事件。

你可以将你用bind()注册的自定义事件取消绑定。

I如果提供了事件类型作为参数,则只删除该类型的绑定事件。

如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。

jquery:怎可以阻止第二次点击click事件?

jquery提供了一个只触发一次点击的方法

obj.one(function(){
});

或者用obj.unbind("click")取消点击事件

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 #Javascript
jQuery中ajax错误调试分析
Dec 01 #Javascript
JQuery学习总结【二】
Dec 01 #Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 #Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 #Javascript
Vue方法与事件处理器详解
Dec 01 #Javascript
简单理解vue中实例属性vm.$els
Dec 01 #Javascript
You might like
十天学会php之第十天
2006/10/09 PHP
针对初学PHP者的疑难问答(2)
2006/10/09 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
python Selenium 库的使用技巧
2020/10/16 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
骆驼官方商城:CAMEL
2016/11/22 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
校园新闻广播稿
2014/01/10 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
护士辞职信怎么写
2015/02/27 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
详解Spring事件发布与监听机制
2021/06/30 Java/Android
一文搞懂MySQL索引页结构
2022/02/28 MySQL
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS