阻止a链接跳转的点击事件
<a href="http://www.baidu.com" id="btn">按钮</a>
<script>
document.getElementById('btn').onclick = function () {
console.log('执行要发生的事件逻辑');
}
</script>
上述代码中,点击按钮,就会跳转到新的页面。想要阻止页面的跳转:
在事件函数最后添加一句 return false
<a href="http://www.baidu.com" id="btn">按钮</a>
<script>
document.getElementById('btn').onclick = function () {
console.log('执行要发生的事件逻辑');
return false;
}
</script>
也可以在行内绑定这样做:
<a href="http://www.baidu.com" id="btn" onclick="fn();return false;">按钮</a>
<script>
function fn() {
console.log('执行要发生的事件逻辑');
}
</script>
阻止a链接跳转的点击事件的更多相关文章
- 阻止a标签跳页,使用单击事件函数处理该请求
阻止a标签跳页href="javascript:void(0)" 单击该标签时 页面不跳页 使用单击事件函数来处理该单击请求 返回上一层页面 ---------------- ...
- 阻止a链接跳转方法总结
总结下a标签阻止默认行为的几种简单方法(1) <a href="javascript:void(0);" > 点我 </a> onclick方法负责执行js ...
- Chrome开发者工具应对页面跳转页面点击事件等实用干货
1.如何解决页面跳转 打开Preserve log即可 禁用页面缓存在右边的disable cache 2.如何监听页面点击 重要的是举一反三,看不懂英文去翻译!Mouse鼠标,click点击,,,, ...
- 微信小程序页面跳转绑定点击事件
https://www.cnblogs.com/mrszhou/p/7931747.html
- window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理
window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理 写PC下拉菜单的时候,hover样式显示下拉菜单,可能会这样写 <li class="xb_li1" ...
- 阻止点击<a>标签链接跳转
我们常用的在a标签中有点击事件(<a href="地址">链接</a>),其中“href”参数只要不为空,点击该链接时,页面会自动跳转:如果指定的“hr ...
- 阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
问题:ios封装完之后,点击里边的按钮会跳转到网页上 ——小卡遇到这个问题就是这样解决的↓↓↓ 解决方法:建议将代码放到</head>标签前,当然,另外存为一个js 文件引用也是可以的呦~ ...
- JS阻止链接跳转代码
刷新后focus在第一个标签 onload="$('#input_email').focus(); " $(document).ready(function(){ $(" ...
- 点击链接跳转到QQ的情况; qq交谈
https://blog.csdn.net/qq_31856835/article/details/70225968 https://blog.csdn.net/qq_37815596/article ...
随机推荐
- 基于python2+selenium3+pytest4的UI自动化框架
环境:Python2.7.10, selenium3.141.0, pytest4.6.6, pytest-html1.22.0, Windows-7-6.1.7601-SP1 特点:- 二次封装了s ...
- 题解 SP1716 【GSS3 - Can you answer these queries III】
\[ Preface \] 没有 Preface. \[ Description \] 维护一个长度为 \(n\) 的数列 \(A\) ,需要支持以下操作: 0 x y 将 \(A_x\) 改为 \( ...
- C# 把带有父子关系的数据转化为------树形结构的数据 ,以及 找出父子级关系的数据中里面的根数据Id
紧接上一篇,将List<Menu>的扁平结构数据, 转换成树形结构的数据 返回给前端 , 废话不多说,开撸! --------------------- 步骤: 1. 建 Menu ...
- 使用 Visual Studio 2015 + Python3.6 + tensorflow 构建神经网络时报错:'utf-8' codec can't decode byte 0xcc in position 78: invalid continuation byte
使用 Visual Studio 2015 + Python3.6 + tensorflow 构建神经网络时报错:'utf-8' codec can't decode byte 0xcc in pos ...
- 图像数组运算相关问题(nan/inf)
新年第一更!祝愿新的一年技术长足进步哈! 最近在用sklearn的回归分析模型拟合预测遥感图像,遇到了一些问题,好在一一解决,现在总结一下. 1.首先输入sklearn的数据必须reshape(-1, ...
- 《Head first设计模式》之适配器模式
适配器模式将一个类的接口,转换成客户期望的另一个接口.适配器让原本接口不兼容的类可以合作无间. 我们周围的适配器 如果你需要在欧洲国家使用美国制造的笔记本电脑,你可能需要使用一个交流电的适配器. 你知 ...
- MongoDB入门(介绍、安装)
一.什么是MongoDB? MongoDB is a document database with the scalability and flexibility that you want with ...
- light oj 1035 - Intelligent Factorial Factorization 素因子分解
1035 - Intelligent Factorial Factorization Given an integer N, you have to prime factorize N! (facto ...
- 刷题94. Binary Tree Inorder Traversal
一.题目说明 题目94. Binary Tree Inorder Traversal,给一个二叉树,返回中序遍历序列.题目难度是Medium! 二.我的解答 用递归遍历,学过数据结构的应该都可以实现. ...
- 图解Java设计模式之设计模式面试题
图解Java设计模式之设计模式面试题 1.1 Java设计模式内容介绍 1.1.1 先看几个经典的面试题 1.1.2 设计模式的重要性 1.1 Java设计模式内容介绍 1.1.1 先看几个经典的面试 ...