实例解析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中each方法示例和常用选择器
Jul 08 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
Vue声明式渲染详解
May 17 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
js Flash插入函数免激活代码
2009/03/31 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python创建关联数组(字典)的方法
2015/05/04 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
python实现神经网络感知器算法
2017/12/20 Python
对Python 语音识别框架详解
2018/12/24 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
python调用摄像头拍摄数据集
2019/06/01 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
文员自我评价怎么写
2013/09/19 职场文书
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
公司门卫岗位职责
2014/03/15 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
单位提档介绍信
2015/10/22 职场文书
技术入股合作协议书
2016/03/21 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
MySQL时区造成时差问题
2022/04/13 MySQL