<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链接跳转的点击事件的更多相关文章

  1. 阻止a标签跳页,使用单击事件函数处理该请求

    阻止a标签跳页href="javascript:void(0)" 单击该标签时 页面不跳页   使用单击事件函数来处理该单击请求  返回上一层页面 ---------------- ...

  2. 阻止a链接跳转方法总结

    总结下a标签阻止默认行为的几种简单方法(1) <a href="javascript:void(0);" > 点我 </a> onclick方法负责执行js ...

  3. Chrome开发者工具应对页面跳转页面点击事件等实用干货

    1.如何解决页面跳转 打开Preserve log即可 禁用页面缓存在右边的disable cache 2.如何监听页面点击 重要的是举一反三,看不懂英文去翻译!Mouse鼠标,click点击,,,, ...

  4. 微信小程序页面跳转绑定点击事件

    https://www.cnblogs.com/mrszhou/p/7931747.html

  5. window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理

    window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理 写PC下拉菜单的时候,hover样式显示下拉菜单,可能会这样写 <li class="xb_li1" ...

  6. 阻止点击<a>标签链接跳转

      我们常用的在a标签中有点击事件(<a href="地址">链接</a>),其中“href”参数只要不为空,点击该链接时,页面会自动跳转:如果指定的“hr ...

  7. 阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页

    问题:ios封装完之后,点击里边的按钮会跳转到网页上 ——小卡遇到这个问题就是这样解决的↓↓↓ 解决方法:建议将代码放到</head>标签前,当然,另外存为一个js 文件引用也是可以的呦~ ...

  8. JS阻止链接跳转代码

    刷新后focus在第一个标签 onload="$('#input_email').focus(); " $(document).ready(function(){ $(" ...

  9. 点击链接跳转到QQ的情况; qq交谈

    https://blog.csdn.net/qq_31856835/article/details/70225968 https://blog.csdn.net/qq_37815596/article ...

随机推荐

  1. 基于python2+selenium3+pytest4的UI自动化框架

    环境:Python2.7.10, selenium3.141.0, pytest4.6.6, pytest-html1.22.0, Windows-7-6.1.7601-SP1 特点:- 二次封装了s ...

  2. 题解 SP1716 【GSS3 - Can you answer these queries III】

    \[ Preface \] 没有 Preface. \[ Description \] 维护一个长度为 \(n\) 的数列 \(A\) ,需要支持以下操作: 0 x y 将 \(A_x\) 改为 \( ...

  3. C# 把带有父子关系的数据转化为------树形结构的数据 ,以及 找出父子级关系的数据中里面的根数据Id

    紧接上一篇,将List<Menu>的扁平结构数据, 转换成树形结构的数据 返回给前端   ,   废话不多说,开撸! --------------------- 步骤: 1. 建 Menu ...

  4. 使用 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 ...

  5. 图像数组运算相关问题(nan/inf)

    新年第一更!祝愿新的一年技术长足进步哈! 最近在用sklearn的回归分析模型拟合预测遥感图像,遇到了一些问题,好在一一解决,现在总结一下. 1.首先输入sklearn的数据必须reshape(-1, ...

  6. 《Head first设计模式》之适配器模式

    适配器模式将一个类的接口,转换成客户期望的另一个接口.适配器让原本接口不兼容的类可以合作无间. 我们周围的适配器 如果你需要在欧洲国家使用美国制造的笔记本电脑,你可能需要使用一个交流电的适配器. 你知 ...

  7. MongoDB入门(介绍、安装)

    一.什么是MongoDB? MongoDB is a document database with the scalability and flexibility that you want with ...

  8. light oj 1035 - Intelligent Factorial Factorization 素因子分解

    1035 - Intelligent Factorial Factorization Given an integer N, you have to prime factorize N! (facto ...

  9. 刷题94. Binary Tree Inorder Traversal

    一.题目说明 题目94. Binary Tree Inorder Traversal,给一个二叉树,返回中序遍历序列.题目难度是Medium! 二.我的解答 用递归遍历,学过数据结构的应该都可以实现. ...

  10. 图解Java设计模式之设计模式面试题

    图解Java设计模式之设计模式面试题 1.1 Java设计模式内容介绍 1.1.1 先看几个经典的面试题 1.1.2 设计模式的重要性 1.1 Java设计模式内容介绍 1.1.1 先看几个经典的面试 ...