javascript关于标签<a>的事件问题

最新推荐文章于 2024-07-26 16:58:01 发布
原创 最新推荐文章于 2024-07-26 16:58:01 发布 · 189 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JavaScript #Ajax #浏览器 #ViewUI

本文探讨了将HTML中的链接<a>元素当作按钮使用时遇到的问题，即点击时会触发两次请求：一次由onclick事件引起，另一次则是href属性默认行为导致。文章提供了两种解决方案：一是将href设置为javascript:void(0)，阻止其默认行为；二是通过JavaScript来处理点击事件，避免默认行为的发生。

   今天浏览到一篇关于链接<a>的事件问题的帖子，特此摘录以备不时之需。

 

      当我们把链接当做按钮使用的时候，比如这样：<a href=="" onclick="addOneNumber();">+</a>  千万注意了！如果这样写的话，当你点击这个链接的时候，会发送两个请求到后台去，一个是onclick触发的处理函数发送一个AJAX请求，一个是href=“”发送一个刷新本页面的请求！我的本意是只发送一个AJAX请求局部刷新页面即可，我怎么搞都不对，原来是href=""的原因！把href=“”改成href="javascript:void(0)"即可，就是把这个链接失效（刚开始我还以为是浏览器的原因，因为在不同的浏览器有不同的效果，看来不能轻易怀疑浏览器！）

 

 

还有一种不推荐的解决方式，原因是没有采用js事件，不是很喜欢：

<a href=="JavaScript:addOneNumber();">

 

HTML中的＜a＞标签使用指南
一起coding，一起嗨。
06-16 2769
HTML中的标签使用指南
js a标签点击事件
11-30
在JavaScript和HTML交互中，`<a>`标签通常用于创建链接，但有时我们需要在点击`<a>`标签时不进行实际的页面跳转，而是执行一些JavaScript代码。这通常发生在我们想要实现自定义交互或者需要在用户点击时执行特定功能...
a 标签中调用js的几种方法
热门推荐
余书懿
04-09 14万+
我们常用的在a标签中有点击事件： 1. a href="javascript:js_method();" 这是我们平台上常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行java
jquery click()方法模拟点击事件对a标签不生效的解决办法
大智若愚的博客
06-05 3万+
<a href="www.baidu.com"></a>问题分析点击A标签本身，并不会触发跳转到指定链接的事件，就是说，我们平时都是点击的A标签中的文字了。 所以要想用JS模拟点击A标签事件，就得先往A标签中的文字添加能被JS捕获的元素，然后再用JS模拟点击该元素即可。 打印$(“a”)[0]，得到的是http://www.baidu.com，但实际上$(“a”)[0]是一个object对象，或许
html a 触发函数,通过js事件触发<a>标签点击事件
weixin_42418755的博客
06-25 325
ceshi通过网上查找得到：var comment = document.getElementsByTagName('a')[0];comment.href = "2.html";//alert(comment.href);if (document.all) {// For IEcomment.click();} else if (document.createEvent) {//FOR DOM2...
jquery触发<a>标签跳转事件
刘鹏的技术宅
07-19 4858
1.写入标签： 水觅微博 2.加入JS： function checkValidate(){ if($("#signOut").text()){ window.location.href="/jsp/weibo/index.jsp"; }else{ window.location.href="index.jsp"; } } 3.解释： $("#signOut").text()为我所需
<a>标签中 href 和 onclick 的区别，以及href="javascript:xxx(this);"与onclick="xxx(this);" 传递this参数的区别
有范管理美学 | 公众号/头条号：有范管理美学
08-18 3万+
标签中href属性动作和onclick事件的区别，以及href="javascript:xxx(this);"与onclick="xxx(this);" 传递this参数的区别 一、href 与 onclick 的区别 我以前在写标签的 href 和 onclick 一直很随意，后来出过几次问题，以后才开始重视这个问题： 首先摘录一篇文
鼠标悬停<a>标签效果
05-25
总结来说，实现鼠标悬停<a>标签效果主要依赖于CSS和JavaScript。通过调整颜色、下划线、背景等样式，以及利用JavaScript来显示额外信息或执行其他动态操作，我们可以创建丰富的交互体验，使用户在浏览网页时更加便捷...
精选资源
Vue中通过<script></script>引入的Vue.js文件
04-28
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 格式就是： <script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"></script> src里面的内容根据自己的下载的Vue.js的...
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
10-18
在JavaScript中，有时候我们需要对HTML字符串进行处理，例如在某些情况下需要去除`<a>`标签，但同时要保留其中的文字内容。这篇文档介绍了一个实用的方法，通过正则表达式实现这个功能，同时也涉及到了对`<span>`...
默认行为及阻止
最新发布
太阳当空照，花儿对我笑，微风轻轻拂，心情无限好。
07-26 890
浏览器以及HTML元素提供了一些默认行为，也可以称作默认事件。
在"a"标签中添加点击事件
l_degege的专栏
05-31 7万+
<a href="javascript:void(0)" onclick="roleupdate()">修改</a> 注：https://www.cnblogs.com/sushu-yaya/p/6811426.html <!DOCTYPE html> <html lang="en"> <head> <meta ch...
<a>标签中的onclick和href属性
zyb2017的博客
10-18 1978
顺序1.onclick和href的执行顺序 代码：//会先执行jump()方法，然后执行href跳转到login.html页面 <a href="login/login.html" onclick = "jump();">点击跳转到login页面</a>判断跳转1.在jump中添加判断//通过event.preventDefault取消跳转 <a href="login/login.html" o
a 标签 onclick 调用 js 方法失败
arashidemember的博客
04-12 2190
问题描述：jsp 页面的 a 标签中的  onclick方法  在js 文件中无法调用页面：js:解决方案：方案很多，以下是我测试成功的方案。问题解决啦！！！
HTML <a> 标签的小知识
strongerzhi的专栏
01-23 457
在HTML中，标签是实现页面跳转的一个神器，使用频率相当高，但是，在具体的开发过程中，我们在点击一个连接的同时，还想顺便做一些其他的事情，这样，很多人会选择Click事件，今天专门试验了一下，留个记录。
a标签绑定点击事件
b2997215859的博客
03-23 7万+
a标签既可以跳转，也可以绑定点击事件，可以将href设为javascript:void(0) 其中javascript表示伪协议，void(0)表示不执行动作，实际上就是不跳转的意思 然后给a像普通标签一样绑定事件监听函数即可 测试代码如下:testLoad.html (顺便测试了一下jquery里面的load函数) testLoad $(function(){
a标签的点击事件
qq_39822451的博客
04-09 6671
<a href="javascript:void(0)" onclick="xxx()">修改</a>
html中如何实现a标签的点击事件
施勇
06-14 5万+
a标签定义超链接，用于从一张页面链接到另一张页面，它最重要的属性是 href 属性，它指示链接的目标。<a href="http://www.w3school.com.cn">W3School</a>最常用的就像这样添加一个链接，如果是点击事件的话，建议用下面的写法<a href="javascript:void(0);" onclick="js_method()"></a>这种方法是很多网站最常用
<a>标签点击事件
z轴的博客
09-10 1299
今天发现a标签点击事件一个特殊的地方,记录一下。 我想通过点击导航条更换content里面的内容，点击的时候只有放手的一下content里面的内容改变了,立马又变成了改变之前的样子，但是我尝试用input点击的时候content里面的内容是永久性改变的。 代码如下： html代码：<li><a href="" class="active" id="user-register-click">用户
深入解析HTML与JavaScript结合的<script>标签与<body>应用
JavaScript脚本可以在`<head>`标签内或者`<body>`标签后插入。将脚本放在`<head>`中的好处是，这些脚本在页面渲染之前会被执行，可能会影响到页面的样式和结构（如CSS和DOM操作）。然而，如果脚本依赖于页面内容，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值