实例解析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 相关文章推荐
jQuery 性能优化指南 (1)
May 21 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
js实现图片懒加载效果
Jul 17 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
js实现旋转的星空效果
Nov 01 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
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通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
详解Bootstrap插件
2016/04/25 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
js如何验证密码强度
2020/03/18 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
教学改革实施方案
2014/03/31 职场文书
调查研究项目计划书
2014/04/29 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
实习生个人总结范文
2015/02/28 职场文书
工作简历自我评价
2015/03/11 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python