详解a标签添加onclick事件的几种方式

我们常用的在a标签中有点击事件：

1. a href="javascript:js_method();" rel="external nofollow"

这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不 必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行 javascript语句

2. a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()"

这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

3.a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="js_method()"

这种方法跟跟2种类似，区别只是执行了一条空的js代码。

4.a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()"

这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

5.a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"

这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。

综合上述，在a中调用js函数最适当的方法推荐使用：
a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()"

a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="js_method()"

a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;"

以上所述是小编给大家介绍的a标签添加onclick事件的几种方式详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • IE8的JavaScript点击事件(onclick)不兼容的解决方法

    博客园闪存分页是用JavaScript生成的,今天发现在IE8下点击页码不能翻页,翻页操作是在当前页码的onclick事件中进行的. 开始代码是这么写的: 复制代码 代码如下: var a = document.createElement("a");a.setAttribute("onclick", this.ClickFunctionName + "(" + pageIndex + ");Pager.SetCurrent("

  • javascript中onclick(this)用法介绍

    this指触发事件的对象 复制代码 代码如下: <input id="myinput" type="text" value="javascript中onclick中的this" onclick="javascript:test(this);"/> 复制代码 代码如下: function test(obj){ alert(obj); //[object HTMLInputElement] alert(obj.id);

  • javascript option onclick事件ie解决方案 兼容ie,firefox

    select-option onclick function simOptionClick4IE(){ var evt=window.event ; var selectObj=evt?evt.srcElement:null; // IE Only if (evt && selectObj && evt.offsetY && evt.button!=2 && (evt.offsetY > selectObj.offsetHeight |

  • javascript 动态改变onclick事件触发函数代码

    javascript 动态改变onclick事件触发函数代码 function oc() { alert("原本的方法"); } function od() { alert("我改变方法了."); } function of() { document.getElementById('name').onclick = function(){ od(); }; } 原来的方法 通过点击,改变原来的方法的执行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JavaScript给按钮绑定点击事件（onclick）的方法

    本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script

  • JavaScript中click和onclick本质区别与用法分析

    本文实例讲述了JavaScript中click和onclick本质区别与用法.分享给大家供大家参考,具体如下: 原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的一个按钮.button元素没有默认的行为,但是必须有一个 onclick 事件句柄以便使用. 语法:buttonObject.click() <html> <head> &l

  • 详解a标签添加onclick事件的几种方式

    我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" rel="external nofollow" 这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不 必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放.W3C标准不推荐在href里面执行 javascript语句 2. a href="jav

  • 详解springboot解决CORS跨域的三种方式

    详解springboot解决CORS跨域的三种方式

    目录 一.实现WebMvcConfigurer接口 二.实现filter过滤器方式 三.注解@CrossOrigin 四.实战 五.cookie的跨域 一.实现WebMvcConfigurer接口 @Configuration public class WebConfig implements WebMvcConfigurer { /** * 添加跨域支持 */ @Override public void addCorsMappings(CorsRegistry registry) { // 允

  • 详解python连接telnet和ssh的两种方式

    目录 Telnet 连接方式 ssh连接方式 Telnet 连接方式 #!/usr/bin/env python # coding=utf-8 import time import telnetlib import logging __author__ = 'Evan' save_log_path = 'result.txt' file_mode = 'a+' format_info = '%(asctime)s - %(filename)s[line:%(lineno)d] - %(level

  • 详解JavaScript发送埋点请求的两种方式

    详解JavaScript发送埋点请求的两种方式

    目录 一.用法 1.动态创建<img> 2.动态创建<script> 二.区别 区别1 区别2 三.选择哪种方式 四.总结 对于统计页面数据这样的情景(俗称埋点),我们常用的方式就是动态创建<img>或<script>,至于原因,一般有以下几点: 1.埋点一般不用关心请求的结果 2.可以实现跨域请求 3.无需使用ajax就能达到发请求的目的 4.都是原生实现,兼容性好 现就两种方式做一下对比和总结: 一.用法 1.动态创建<img> 方式1:通过

  • 详解Java中数组判断元素存在几种方式比较

    1. 通过将数组转换成List,然后使用List中的contains进行判断其是否存在 public static boolean useList(String[] arr,String containValue){ return Arrays.asList(arr).contains(containValue); } 需要注意的是Arrays.asList这个方法中转换的List并不是java.util.ArrayList而是java.util.Arrays.ArrayList,其中java.

  • 详解Python修复遥感影像条带的两种方式

    GDAL修复Landsat ETM+影像条带 Landsat7 ETM+卫星影像由于卫星传感器故障,导致此后获取的影像出现了条带.如下图所示, 影像中均匀的布满条带. 使用GDAL修复影像条带的代码如下: def gdal_repair(tif_name, out_name, bands): """ tif_name(string): 源影像名 out_name(string): 输出影像名 bands(integer): 影像波段数 """ #

  • 详解React中共享组件逻辑的三种方式

    废话少说,这三种方式分别是:render props.高阶组件和自定义Hook.下面依次演示 假设有一个TimeOnPage组件专门用来记录用户在当前页面停留时间,像这样: const TimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return

  • 详解Python+opencv裁剪/截取图片的几种方式

    详解Python+opencv裁剪/截取图片的几种方式

    前言 在计算机视觉任务中,如图像分类,图像数据集必不可少.自己采集的图片往往存在很多噪声或无用信息会影响模型训练.因此,需要对图片进行裁剪处理,以防止图片边缘无用信息对模型造成影响.本文介绍几种图片裁剪的方式,供大家参考. 一.手动单张裁剪/截取 selectROI:选择感兴趣区域,边界框框选x,y,w,h selectROI(windowName, img, showCrosshair=None, fromCenter=None): . 参数windowName:选择的区域被显示在的窗口的名字

  • 详解pytorch的多GPU训练的两种方式

    详解pytorch的多GPU训练的两种方式

    目录 方法一:torch.nn.DataParallel 1. 原理 2. 常用的配套代码如下 3. 优缺点 方法二:torch.distributed 1. 代码说明 方法一:torch.nn.DataParallel 1. 原理 如下图所示:小朋友一个人做4份作业,假设1份需要60min,共需要240min. 这里的作业就是pytorch中要处理的data. 与此同时,他也可以先花3min把作业分配给3个同伙,大家一起60min做完.最后他再花3min把作业收起来,一共需要66min. 这个

  • 详解Python进行数据相关性分析的三种方式

    详解Python进行数据相关性分析的三种方式

    目录 相关性实现 NumPy 相关性计算 SciPy 相关性计算 Pandas 相关性计算 线性相关实现 线性回归:SciPy 实现 等级相关 排名:SciPy 实现 等级相关性:NumPy 和 SciPy 实现 等级相关性:Pandas 实现 相关性的可视化 带有回归线的 XY 图 相关矩阵的热图 matplotlib 相关矩阵的热图 seaborn 相关性实现 统计和数据科学通常关注数据集的两个或多个变量(或特征)之间的关系.数据集中的每个数据点都是一个观察值,特征是这些观察值的属性或属性.

随机推荐