js 重写a标签的href属性和onclick事件

适应场景:假如移动端拨打电话,需要给a标签添加href属性,但是由于需求,需要链接跳转的同时给a标签添加onclick事件,如果不做任何处理的话,默认执行点击事件,而不会跳转href属性的链接。

怎么解决:重写a标签的href属性和onclick事件

//这段代码可放入点击事件里

(function(){

this.fnCancel();

var _event_list = {};

// 找到页面上所有的a标签

var links = document.getElementsByTagName("a")[0];

// 保存click属性的值

var _click = links.getAttribute("onclick");

// 保存href属性的值

var _href = links.getAttribute("href");

if (_click != null) {

// 给onclick属性重新设值

links.setAttribute("onclick", "eval_a_click_event(‘a‘)");

}

if (_href != null) {

// 给href属性重新设值

links.setAttribute("href", "javascript:eval_a_href_event(‘a‘)");

}

_event_list["a"] = [links, _href, _click];

})()

function eval_a_href_event(id) {

var link = _event_list[id];

if (link != null && link[1] != null) {

// 拿到href属性的值

alert(link[1]);

// 将href属性值重新赋回原来的值

link[0].setAttribute("href", link[1]);

// 移除单击事件

link[0].removeAttribute("onclick");

// 模拟单击事件

link[0][0].click();

// 重写href属性的值

link[0].setAttribute("href", "javascript:eval_a_href_event(‘" + id + "‘)");

// 如果有单击事件,重新加上

if (link[2] != null) {

link[0].setAttribute("onclick", link[2]);

}

}

}

function eval_a_click_event(id) {

var link = _event_list[id];

if (link != null && link[2] != null) {

// 拿到单击事件的方法

alert(link[2]);

// 执行单击事件

eval(link[2]);

}

}

原文地址:https://www.cnblogs.com/huoerheaven/p/9391703.html

时间: 2024-08-05 19:09:56

js 重写a标签的href属性和onclick事件的相关文章

<a>标签href属性与onclick事件

a标签主要用来实现页面跳转,可以通过href属性实现,也可以在onclick事件里实现. <a onclick="window.location.href='www.cnblogs.com'" href="javascript:void(0);">博客园</a> 博客园 这段代码在主流浏览器里都没问题,但在IE6下会出现不能跳转的问题.这究竟是什么原因呢? javascript:void(0); void(arg);可以理解为永远返回null

给&lt;a&gt;标签增加href属性 ~~~ 转转

给<a>标签增加href属性,就意味着以下事情: :link选择器可以选择到它 这个a标签可以获得焦点(可以通过tab按键访问到) 在浏览器的默认样式表中,有href属性的<a>标签才有cursor:pointer的效果(尤其是在低版本的IE上). 绑定了onclick事件的<a>标签,尤其是它的作用是ajax请求时,基本上我们就用不上这个标签的默认行为,也连接不到的实际页面,一般而言也会在CSS里给予了这个元素的cursor等样式.这时候还要加上href属性,是为了:

&lt;a&gt;标签的href属性

<a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段. javascript: 是一个伪协议,其他的伪协议还有 mail:  tel:  file:  等等.例如: <p><a href="javascript:window.close();">退出管理系统</a></p> javascript:是表示在触发<

css27】base标签带有href属性会让chrome里的svg元素url失效

一个chrome的问题,但具体原因不明. 触发条件:chrome浏览器base标签里href属性有值的时候 触发问题:svg里面的元素如果有用url的滤镜和模糊,则会失效,在firefox里和IE10没有发现这个问题. 正常状态: 有base标签且href里值为“.”的时候chrome里的状态:  测试代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>

使用xpath提取页面所有a标签的href属性值

# -*- coding: utf-8 -*- #1.选取节点 #获取所有的div元素 //div #/代表获取根节点的直接子元素 #获取所有带有id属性的div //div[@id] #2.谓词(索引从1开始) #获取body下面的第一个/最后一个div元素/前两个 //body/div[1] //body/div[last()] //body/div[position<3] #获取具有class='price'属性的div标签 //div[@class='price'] #3.通配符 # *

a标签href无值 onclick事件跳转

<a href='#'  onclick='gomore()'>更多>></a>  单击无反应 <a href='javascript:void(0)'  onclick='gomore()'>更多>></a> js实现不打开新窗口跳转 document.location.href=url; 打开新窗口跳转 window.open(url); a标签href无值 onclick事件跳转

javascript和jquery修改a标签的href属性

javascript: 代码如下: document.getElementById("myId").setAttribute("href","www.xxx.com"); document.getElementById("myId").href = "www.xxx.com"; jquery: 代码如下: $("#myId").attr("href","ww

js 控制 input标签的 readonly属性

input 标签的 readonly 属性   $('#id').attr("readonly","readonly")//将input元素设置为readonly   $('#id').removeAttr("readonly");//去除input元素的readonly属性     if($('#id').attr("readonly")==true)//判断input元素是否已经设置了readonly属性 本人喜欢如下方法

用JS改变embed标签的src属性

思路: A.先隐藏embed标签 B.清除embed元素 C.为embed重新赋值,加入Html页面中 1.html代码 <object id="forfun" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" codebase="http://fpdownload.macromedia.com/pub