a链接的js点击事件和其他元素onclick事件里this的区别

于 2022-10-30 18:34:20 发布 85 收藏
分类专栏： js 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyswl666/article/details/127602907
版权

今天做一个点击事件的时候，使用了a链接的点击事件，通过<a href="javascript:">这种形式来实现的，但是发现传this的时候和其他元素的onclick事件不一样，比如<button οnclick="add(this)">这里的，a链接的this本质还是链接，只有onclick里的才是元素本身，可以通过jquery或者js原生的各种dom操作

hyswl666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript onclick事件使用方法详解
11-20
onclick是一个事件，当事件被触发时就会执行处理，onclick是一个处理鼠标点击的事件。本篇文章就给大家分享关于JavaScript中onclick事件的用法。 我们首先来看一下onclick事件的语法 以下是如何使用onclick事件编写。 使用document.getElementById（）在文档中指定id元素，并使用function(){}处理单击该元素时发生的事件。 document.getElementById("button").onclick = function() { // 设置在此处单击#button时要发生的事件 }; 我们来看具体的示例 以下是使用oncl
a标签的href与onclick事件的区别详解
12-09
onclick中javascript的区别一般没用到都没注意，但出错时才有些郁闷，看文本章解释如下： 以前一直很随意，后来看.net里的linkbutton似乎是用在<a>的形式，今天用这种方式就遇到一些问题，摘网友的文章和我的结论放在下面： 1.链接的 onclick 事件被先执行，其次是 href 属性下的动作（页面跳转，或 javascript 伪链接）； 2.假设链接中同时存在 href 与 onclick，如果想让 href 属性下的动作不执行，onclick 必须得到一个 false 的返回值。不信，你可以将 goGoogle
详解a标签添加onclick事件的几种方式
12-09
我们常用的在a标签中有点击事件： 1. a href=”[removed]js_method();” rel=”external nofollow” 这种方法在传递this等参数的时候很容易出问题，而且[removed]协议作为a的href属性的时候不仅会导致不 必要的触发[removed]事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行 javascript语句 2. a href=”[removed]void(0);” rel=”external nofollow” rel=”external nofollow” onc
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
10-18
主要介绍了JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法,结合实例形式分析了javascript通过针对单击onclick事件增加定时器进行onClick事件与onDblClick事件的区别判定操作,需要的朋友可以参考下
在JS中a标签加入单击事件屏蔽href跳转页面
01-19
我们常用的在a标签中有点击事件： 1. a href=[removed]js_method(); 这是我们平台上常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且[removed]协议作为a的href属性的时候不仅会导致不必要的触发[removed]事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句 2. a href=[removed]void(0); onclick=js_method() 这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行
JS中onclick与addEventListener的区别详解
01-08
一、onclick： 1.onclick添加事件：        语法： element.onclick = function (){};        实例如下： 点我 var box1 = document.getElementById(box1); box1.onclick = function(){ console.log(我是第一个); } box1.onclick = function(){ console.log(我是第二个); }        结果：        以上结果显示，点
javascript里面关于绑定click的this和onclick触发this的区别
a413883127的专栏
05-24 2056
之前在做项目的时候，有时候会直接
关于React项目中的import xxx和import {}的区别
qq_44606064的博客
10-11 706
关于React项目中的import xxx和import {}的区别
onclick事件属性与在用js绑定onclick事件中的this的区别
09-10 188
一句话:this永远指向所在函数的拥有者. 举几个例子: 1.id为"aa"的a元素有一个onclick属性,属性值为f1() <a href="javascript:;" title="" id="aa" onclick="f1()">分类列表</a> //f1的定义function f1(){console.log(this);} ...
href="javascript:xxx(this);"和onclick="javascript:xxx(this);"的区别
cuker919的专栏
12-05 220
href="javascript:xxx(this);"和onclick="javascript:xxx(this);" 一直以为这两种写法是等同的，今天在项目中使用时发现前者的this根本拿不到触发事件的A标签，而后者可以拿到 一般在做分页按钮时会用A标签来做，但是一般都会写&lt;a href="#" onclick="turnPage(1,10)"&gt;之类的 href="#"会
js a标签点击事件
10-20
本文将详细介绍a标签上的点击事件的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
a标签的href和onclick 的事件的区别介绍
12-09
1、onclick事件先执行，如果onclick事件返回一个false值则href不再执行。 2、href=“#”默认页面到锚点#top所以页面有滚动条时会跳到最上面。最好的解决办法是href=”[removed]void(0);”。 3、href中的返回内容会冲...
原生JS操作网页给p元素添加onclick事件及表格隔行变色
10-26
原生JS操作网页,给网页中的所有p元素添加onclick事件，使一个特定的表格隔行变色等等，感兴趣的朋友可以参考下
a标签href属性和onclick事件的比较介绍
09-28
当鼠标点击a标签的时候会先执行 onclick事件， 然后才是 href 属性下的动作，如果不想执行href 属性下的动作执行，onclick 需要要返回false，感兴趣的朋友可以了解下
a标签中的点击事件
weixin_34228617的博客
09-12 324
我们常用的在a标签中有点击事件：1. a href="javascript:js_method();"这 是我们平台上常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行 javasc...
JS a标签的链接执行脚本如何使用onclick
一直专注于互联网
10-06 761
a标签的链接不要把执行函数放在href里面执行，这是有原因的。1、href="javascript:js_method();"这是我们最常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面...
a标签点击事件_JS事件绑定的三种方法
weixin_39631370的博客
11-21 3969
前言在这个框架盛行的时代，可能很多人已经忘记了JS一些基础的方法。虽然说现在在项目都（应该）很少用 原生JS写代码了，但我听说过这样一句话， "对底层知识了解得越深，能达到得水平也就越高。"所以JS原生API还是要熟悉的。 这一篇总结了基础的JS事件绑定，介绍了三种绑定事件的方法。在 HTML 中直接绑定在 Javascript 中绑定绑定事件监听函数 addEventListener()方法1....
a链接执行javascript的方法
shaonian1996
08-22 6459
                            a链接执行javascript的方法 目的：禁止跳转，直接执行a链接绑定的函数 href="javascript:;"，其中javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好...
javascript onclick点击事件
最新发布
06-01
### 回答1： JavaScript onclick点击事件是指在网页中使用JavaScript编程语言，为某个HTML元素（如按钮、链接等）添加点击事件的操作。当用户点击该元素时，JavaScript代码会执行相应的操作，例如弹出提示框、跳转到另一个页面等。这种事件可以通过在HTML元素中添加onclick属性来实现。 ### 回答2： Javascript onclick事件是指当用户点击一个HTML元素时触发的事件。这个事件可以绑定在任何可点击的HTML元素上，包括按钮、链接、图片等等。当用户点击这个元素时，相关的Javascript代码会被执行，从而实现某种功能。这种事件通常用于对用户的交互做出响应，例如弹出一个提示框、提交表单、打开一个新页面等等。 在使用onclick事件时，我们需要在HTML标记中添加一个"onclick"属性。这个属性的值是一个Javascript代码块，可以直接编写Javascript代码，也可以调用一个已经定义好的函数。例如，我们可以使用以下代码来定义一个按钮，并绑定一个点击事件： <button onclick="alert('Hello World!')">点击我</button> 当用户点击这个按钮时，页面会弹出一个对话框，显示"Hello World!"。 除了直接在HTML标记中绑定onclick事件，我们还可以使用Javascript来动态地添加或删除这个事件。例如，我们可以使用以下代码来动态地给一个元素添加一个点击事件： var element = document.getElementById("myElement"); element.addEventListener("click", function() { alert("Hello World!"); }); 当用户点击ID为myElement的元素时，页面会弹出一个对话框，显示"Hello World!"。 总之，Javascript onclick事件是在Web开发中非常常见的事件之一，它可以使我们的页面具有更好的交互性和用户体验。我们可以通过直接在HTML标记中绑定事件，或者通过Javascript动态地添加或删除事件来实现相关功能。 ### 回答3： JavaScript onClick 点击事件是在 Web 页面中经常使用的一种交互式特性。该事件允许开发人员为 HTML 元素添加一个处理程序函数，并在用户单击该元素时调用该函数。在使用 onClick 事件时，开发人员可以为任何 HTML 元素添加操作，包括按钮、链接、文本框等。 例如，当用户单击一个按钮时，可以执行一些 JavaScript 或 JQuery 代码。例如，可以创建一个 alert() 弹出窗口，将数据存储在本地存储中，将用户重定向到另一个页面等等。可以使用 onClick 事件将表单提交按钮与后台服务器上的代码一起使用。 在 HTML 中，可以使用以下语法为元素添加 onClick 事件处理程序： <button onclick="myFunction()">单击我</button> 在上面的代码中，当用户单击按钮时，myFunction() 函数将被调用并运行。该函数可以定义在 script 标记内、内联或外部文件中。 在使用 onClick 事件时，有几个要注意的问题。首先，要确保代码的正确性，以避免后果严重的后果，如 XSS 跨站点攻击。在编写代码时，开发人员应尽力避免使用与 onClick 事件相关的敏感代码，如 eval() 函数等。 其次，不能使用 onClick 事件来替代使用其他的 HTML 代码块，例如 <a> 或 <div>，只是为了将样式或位置值与 JavaScript 一起使用。这样做会大大增加代码的复杂性，降低代码的整体性能。 最后，注意在 onClick 事件处理程序中设置 return 值。如果 return false，则会停止表单提交。如果 return true，则在单击事件完成后继续进行其他操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hyswl666

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值